canvas基础

html:

<canvas id="canvas1" width="800" height="800"></canvas>

 

canvas的宽高只能写在行内，同时决定画布分辨率的大小。css里面设定canvas的宽高并不是真正的大小，而是同比缩放

js:

var canvas = document.getElementById("canvas1");
var context = canvas .getContext('2d');//绘图环境

 

若浏览器不支持canvas：

 

1 html <canvas>不支持canvas的内容</canvas>
2 js if(canvas.getContext('2d')){//判断浏览器是否支持canvas
//支持
}else{
//不支持
alert("");
}
方法：
canvas.width
canvas.height
canvas.getContext('2d')

canvas 是基于状态绘制的，即先定义状态，后绘制
1.起始 context.moveTo(100,100)
2.终止 context.lineTo(700,700)
3.线条 context.stroke()
4.线条宽度 context.lineWidth=5
5.线条颜色 context.strokeStyle='orange'
6.填充颜色 context.fillStyle = 'rgba(2,2,2,0.3)'
7.填充 context.fill()
8.既可填充，又可描边
9.声明开始路径 context.beginPath()
10.声明结束路径 context.closePath()