1.创建画布节点
<!-- HTML代码 -->
<canvas id="test-canvas" width="400" heigth="400">
<p>你的浏览器不支持Canvas</p>
</canvas>
2.获得画布节点
var canvas = document.getElementById("test-canvas");
3.获得绘画对象
var ctx = canvas.getContext('2D'); //获得2D绘画对象
var ctx = canvas.getContext('webgl'); //获得WebGL绘画对象
4.绘制画布底色
ctx.clearRect(0, 0, 400, 400); //把(0,0)位置大小为400x400区域擦除
ctx.fillStyle = '#dddddd'; // 设置填充颜色
ctx.fillRect(0, 0, 400, 400); // 把(0,0)位置大小为400x400的矩形涂色
5.绘制直线
var path=new Path2D();
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
6.绘制圆
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
7.绘制实心文本
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
8.绘制空心文本
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
9.创建渐变
// 创建线性渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
// 创建圆形、径向渐变
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
10.绘制图像
var img=document.getElementById("img");
ctx.drawImage(img,10,10);
11.下载canvas图片
var canvas = document.getElementById('test-canvas');
var data = canvas.toDataURL();
window.open(data.replace('image/png', 'image/octet-stream'));
