Canvas的基本使用

1.基本使用

• HTML

<!--canvas标签里的内容，只有浏览器不支持时才会显示-->
<canvas id="canvas" width="1024" height="768" style="border: 1px solid #a6a6a6; margin: 0 auto; display: block;">当前浏览器不支持canvas</canvas>当前浏览器不支持Canvas，请更换浏览器后再试</canvas>

• JavaScript

var canvas = document.getElementById('canvas');
//得到上下文，绘制时真正用到的接口
var context = canvas.getContext('2d');

//也可以在js中设置大小，效果跟标签设置一样
canvas.width = 1024;
canvas.height = 768;

//也可以用js代码判断用户浏览器是否支持Canvas
if (canvas.getContext){
    //若使用js判断，就把context的获得写在这里
    var context = canvas.getContext('2d');
} else {
    alert("当前浏览器不支持Canvas，请更换浏览器后再试");
}

一个有边框的画布

2.画一条直线

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

//(Canvas的左上角为0，0坐标)
//把画笔放在(x，y)为(100，100)的坐标上
context.moveTo(100,100);
//让画笔从(100，100)移动到(700，700);
context.lineTo(700,700);
//设置线条宽度(默认是1，不带单位)
context.lineWidth = 1;
//设置线条样式(主要指颜色)
context.strokeStyle = "#005588";
//执行绘制(上面的代码只是设置状态,并未真正执行)
context.stroke();

画布中出现一条直线

3.画多边形

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

//1.将画笔放到(100,100)上
context.moveTo(100,100);
//2.再移动到(400,100)
context.lineTo(400,100);
//3.再移动到(400,400)
context.lineTo(400,400);
//4.再移动到(100,400)
context.lineTo(100,400);
//5.1再移动到起始点(100,100),实现一个多边形
//    context.lineTo(100,100);
//5.2也可以直接使用closePath做图型闭合处理
context.closePath();
//设置画笔线条宽度(在多边形中可以理解为边框)
context.lineWidth = 5;
//设置画笔线条颜色
context.strokeStyle = "red";
//设置多边形填充颜色
context.fillStyle = "yellow";
//设置完多边形填充颜色，必须执行fill方法才生效
context.fill();
//执行绘制，实现绘制一个正方形
context.stroke();

画布中出现多边形

4.分开画两条直线

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');


context.moveTo(100,100);
context.lineTo(700,200);
context.lineWidth = 5;
//此直线为红色
context.strokeStyle = "red";
context.stroke();

//另一条线的开始(清空之前的状态)
context.beginPath();
context.moveTo(300,300);
context.lineTo(600,500);
context.lineWidth = 10;
//此直线为蓝色
context.strokeStyle = "blue";
context.stroke();

代码效果图

** 4.1假如不使用beginPath清空之前的状态，就相当于： **

1. 执行第一个context.stroke()时。画了一条从(100, 100)到(700, 200)的线条,样式为{width=5, strokeStyle=red}。
2. 执行第二个context.stroke()时。画了一条从(100, 100)到(700, 200)的线条；又画了一条从(300,300)到(600,500)的线条;两条线都为{width=7, strokeStyle=blue}。

5.画一条弧线（圆）

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 800;
//(300,300)为圆心，100为半径，0为起始位置，1.5*π为终点位置，布尔值：false(默认)表示顺时针描绘、true表示逆时针描绘
context.arc(300, 300, 100, 0, 1.5 * Math.PI, false);
context.lineWidth = 5;
context.stroke();

位置参考图 (false)顺时针的效果 (true)逆时针的效果

使用注意

1. 不建议使用CSS的方式为canvas指定大小，因为CSS仅仅是设置canvas这块画布显示的大小；而除此之外，canvas还包括其内里显示图画分辨率的大小。

2. 在标签内设置width和height，并且不带px单位，这样可以同时设置里外的宽高，这么做也是符合W3C标准的。

3. 默认 width：300；height：150；

彩蛋：绘制一个七巧板

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 800;
//七巧板数据
var tangram = [
    {p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#caff67"},
    {p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"#67becf"},
    {p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"#ef3d61"},
    {p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#f9f51a"},
    {p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"#a594c0"},
    {p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#fa8ecc"},
    {p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#f6ca29"}
];
//遍历数据，tangram数组的每个元素代表一个多边形的数据
for (var i = 0; i < tangram.length; i++) {
    var polygonData = tangram[i];
    //根据信息，描绘图形
    draw(polygonData);

}
function draw(data) {
    //每次进来先把之前的状态清空
    context.beginPath();
    context.moveTo(data.p[0].x,data.p[0].y);
    var point = null;
    for (var i = 1; i < data.p.length; i++) {
        point = data.p[i];
        context.lineTo(point.x,point.y);
    }
    //做图形闭合处理
    context.closePath();
    //设置每块图形的颜色
    context.fillStyle = data.color;
    //执行颜色的填充
    context.fill();
    //执行绘制(这一步可不用,因为填充完颜色后，即使没有线条边框依然能显示一个七巧板)
    //context.stroke();
}

七巧板