1.基本使用
- HTML
当前浏览器不支持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清空之前的状态，就相当于： **
- 执行第一个context.stroke()时。画了一条从(100, 100)到(700, 200)的线条,样式为{width=5, strokeStyle=red}。
- 执行第二个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)逆时针的效果
使用注意
不建议使用CSS的方式为canvas指定大小，因为CSS仅仅是设置canvas这块画布显示的大小；而除此之外，canvas还包括其内里显示图画分辨率的大小。
在标签内设置width和height，并且不带px单位，这样可以同时设置里外的宽高，这么做也是符合W3C标准的。
默认 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();
}
七巧板