JavaScript画板-canvas

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'));