简单了解canvas
1.什么是canvas
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
版本支持：IE9以上
如果实在需要在IE9以前使用，可以查看 Exprorer Canvas Project和其他类似项目，通过插件来实现
浏览器兼容
注：canvas不是矢量图
2.canvas的作用
一些可能的用途，包括使用Canvas构造图形，动画，游戏和图片
当然也包括热工艺图。
3.我们为什么要使用canvas
性能，酷炫，还有什么好说的
1.只用一个 Canvas DOM 元素，降低 DOM 数量与渲染的复杂度，可以将原来 CPU 密集型变成 GPU 操作。
2.充分利用硬件资源的能力。
3.Canvas画布无论是 JavaScript & H5，还是native都有类似的 API。因此我可以把浏览器Canvas接口的反射到用native画布上，以此提高性能。
canvas初识
1.在web页面增加画布
在html页面中增加
<canvas id="hehe" width="600" height="200"></canvas>
注意：canvas宽高可以通过css设置，但是不建议，因为如果之前设置了标签样式，再设置css样式会把canvas图像扯变形
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
#hehe{
background:#000;
width:400px;
height:300px;
}
</style>
</head>
<body>
<canvas id="hehe" width="300" height='300'></canvas>
</body>
<script>
let canvas = document.getElementById("hehe"),
ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);
</script>
</html>
扯变形
2.如何看到画
除非你在画布上设置了内容，否则你是看不见它的，会默认为透明色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
#hehe{
background:#000
}
</style>
</head>
<body>
<canvas id="hehe" width="200" height='300'></canvas>
</body>
</html>
3.在画布上绘图
将画布放置在x=10,y=10的位置建立一个宽高100的矩形
Paste_Image.png
4.一个小小的画布测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
#hehe{
border:1px solid #000
}
</style>
<script>
window.onload = function(){
var canvas = document.getElementById('hehe');
//开始在画布绘制之前，我们必须遵循这个协议
var context = canvas.getContext('2d');//提供一个可绘制的上下文
context.fillStyle = 'blue';//默认填充色为黑色，改变默认填充色
context.fillRect(10, 10, 100, 100); //x, y, 宽, 高
//如果只想要轮廓context.strokeRect(10, 10, 100, 100)
}
</script>
</head>
<body>
<canvas id="hehe" width="300" height:'300'></canvas>
</body>
</html>
我们打算画一个随机生成的圆饼
建立一个表单去控制canvas输出的图像
准备工作
MDN canvas API
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API
http://dev.w3.org/html5/2dcontext/
1.首先，建立HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
#hehe{
border:1px solid #000
}
</style>
<script></script>
</head>
<body>
<canvas id="hehe" width="300" height:'300'>
如果你的浏览器不支持canvas，会不认识canvas标签，会直接识别canvas闭合标签内的文本元素
</canvas>
<form>
</form>
</body>
</html>
2.然后增加form
<form>
<p>
<label for="backgroundColor">选择背景颜色</laberl>
<select id="backgroundColor">
<option value="white" selected="selected">白色</option>
<option value="black">黑色</option>
</select>
</p>
<p>
<label for="shape">选择形状</laberl>
<select id="shape">
<option value="none" selected="selected">都不</option>
<option value="circles">圆</option>
<option value="squares">方块</option>
</select>
</p>
<p>
<label for="foregroundColor">选择文本颜色</laberl>
<select id="foregroundColor">
<option value="black" selected="selected">黑色</option>
<option value="white">白色</option>
</select>
</p>
<p>
<input type="button" id="previewButton" value="预览">
</p>
</form>
3.用js做计算
创建一个hehe.js文件
window.onload = function() {
var button = document.getElementById('previewButton')
button.onclick = previewHandler;
}
function previewHandler() {
var canvas = document.getElementById('hehe');
var context = canvas.getContext('2d');
var selectObj = document.getElementById('shape');
var index = selectObj.selectedIndex;
var shape = selectObj[index].value;
if(shape === "squares"){
for(var squares = 0; squares < 20; squares++){
drawSquare(canvas, context)
}
}
}
4.编写drawSquare函数
function drawSquare(canvas, context){
var w = Math.floor(Math.random() * 40);
var x = Math.floor(Math.random() * canvas.width);
var y = Math.floor(Math.random() * canvas.height);
context.fillStyle = 'lightblue'
context.fillRect(x, y, w, w)
}
5.试试效果
6.增加backgroundColor调用
function fillBackgroundColor(canvas, context){
var selectObj = document.getElementById('backgroundColor');
var index = selectObj.selectedIndex;
var bgColor = selectObj.options[index].value
context.fillStyle = bgColor;
context.fillRect(0, 0, canvas.width, canvas.height)
}
7.奇怪的绘制
画一个简单的三角形
context.beginPath();//开始
context.moveTo(100, 150);////第一次的moveTo指的是将画笔落到指定的位置
context.lineTo(250,75)
context.lineTo(125,30)
context.closePath();//结束
context.stroke();//描绘
//context.fillStyle='red'
//context.fill();
8.分解arc
圆的方法:
context.arc(x, y, radius, startAngle, endAngle, direction)
x和y 参数是来确定圆心在画布上的位置
radius用来指定圆的半径
direction指定圆弧是逆时针还是顺时针，布尔值，true为逆时针，false为顺时针
startAngle 和 endAngle 是圆弧的起始角和 终止角
注意：角可以按负方向（从X轴逆时针）度量，也可以按正方向（从X轴顺时针）度量
9.浅尝弧线的使用
context.beginPath();
context.arc(70,70,60,0, (270 * Math.PI)/180, true)
//等于context.arc(70,70,60,0, (-90 * Math.PI)/180, true)
context.stroke()
起始角X轴与弧线终点之间的角，由于我们的弧是一个90°的弧，所以终止角为270°（注意：如果是按照负值或者逆时针方向来度量，那么终止角就是-90°）
10.度与弧度
360度 = 2PI弧度
11.再来编写圆代码
if(shape === "circles"){
for(var circle = 0; circle < 20; circle++){
drawCircle(canvas, context)
}
}
12.编写drawCircle函数
function drawCircle(canvas, context){
var radius = Math.floor(Math.random() * 40);
var x = Math.floor(Math.random() * canvas.width);
var y = Math.floor(Math.random() * canvas.height);
context.beginPath();
context.arc(x, y, radius, 0 , 2 * Math.PI, true);
context.fillStyle = 'lightblue'
context.fill();
context.stroke()
}
13.完成drawText函数
function drawText(canvas, context){
var selectObj = document.getElementById('foregroundColor');
var index = selectObj.selectedIndex;
var fgColor = selectObj[index].value;
context.fillStyle = fgColor;
context.font = 'bold 1em sans-serif'
context.textAligh = 'left'
context.fillText('在画布上不知道写什么...呵呵', 20, 40)
}
14.搞定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
#hehe{
border:1px solid #000
}
</style>
<script>
window.onload = function() {
var button = document.getElementById('previewButton')
button.onclick = previewHandler;
}
function previewHandler() {
var canvas = document.getElementById('hehe');
var context = canvas.getContext('2d');
fillBackgroundColor(canvas, context);
drawText(canvas, context);
var selectObj = document.getElementById('shape');
var index = selectObj.selectedIndex;
var shape = selectObj[index].value;
if(shape === "squares"){
for(var squares = 0; squares < 20; squares++){
drawSquare(canvas, context)
}
}
if(shape === "circles"){
for(var circle = 0; circle < 20; circle++){
drawCircle(canvas, context)
}
}
}
function drawSquare(canvas, context){
var w = Math.floor(Math.random() * 40);
var x = Math.floor(Math.random() * canvas.width);
var y = Math.floor(Math.random() * canvas.height);
context.fillStyle = 'lightblue'
context.fillRect(x, y, w, w)
}
function fillBackgroundColor(canvas, context){
var selectObj = document.getElementById('backgroundColor');
var index = selectObj.selectedIndex;
var bgColor = selectObj.options[index].value
context.fillStyle = bgColor;
context.fillRect(0, 0, canvas.width, canvas.height)
}
function drawCircle(canvas, context){
var radius = Math.floor(Math.random() * 40);
var x = Math.floor(Math.random() * canvas.width);
var y = Math.floor(Math.random() * canvas.height);
context.beginPath();
context.arc(x, y, radius, 0 , 2 * Math.PI, true);
context.fillStyle = 'lightblue'
context.fill();
context.stroke()
}
function drawText(canvas, context){
var selectObj = document.getElementById('foregroundColor');
var index = selectObj.selectedIndex;
var fgColor = selectObj[index].value;
context.fillStyle = fgColor;
context.font = 'bold 1em sans-serif'
context.textAligh = 'left'
context.fillText('在画布上不知道写什么...呵呵', 20, 40)
}
</script>
</head>
<body>
<canvas id="hehe" width="300" height:'300'>
如果你的浏览器不支持canvas，会不认识canvas标签，会直接识别canvas闭合标签内的文本元素
</canvas>
<form>
<p>
<label for="backgroundColor">选择背景颜色</laberl>
<select id="backgroundColor">
<option value="white" selected="selected">白色</option>
<option value="black">黑色</option>
</select>
</p>
<p>
<label for="shape">选择形状</laberl>
<select id="shape">
<option value="none" selected="selected">都不</option>
<option value="circles">圆</option>
<option value="squares">方块</option>
</select>
</p>
<p>
<label for="foregroundColor">选择文本颜色</laberl>
<select id="foregroundColor">
<option value="black" selected="selected">黑色</option>
<option value="white">白色</option>
</select>
</p>
<p>
<input type="button" id="previewButton" value="预览">
</p>
</form>
</body>
</html>
网友评论