简单canvas入门
- 创建canvas以及初始化
- <canvas id="canvas" width="1024" height="768"></canvas>
注意这个width和height不带px等单位 - JS初始化canvas
- var canvas=document.getElementById('canvas');
- var context=canvas.getContext('2d'); //使用context进行绘制
- 获取canvas的宽度,高度以及上下文环境
- canvas.width
- canvas.height
- canvas.getContext('2d')
- <canvas id="canvas" width="1024" height="768"></canvas>
- 绘制直线、多边形
canvas是基于状态绘制的,使用context.beginPath()和context.closePath()- 绘制直线
- context.beginPath() //开始路径设置
- context.moveTo(100,100) //在(100,100)处放下一个点
- context.lineTo(700,700) //设定从(100,100)向(700,700)划线
- context.lineTo(100,700) //设定从(700,700)向(100,700)划线
- context.closePath() //结束路径设置
- context.lineWidth=5 //设置线条宽度
- context.strokeStyle="#005588" //这个主要设置颜色
- context.stroke() //下达开始绘图的命令
- 填充颜色
- context.fillStyle="rgb(2,100,30)" //填充颜色
- context.fill() //执行填充
- 绘制直线
- 绘制弧和圆
- Draw an arc
- context.arc(
- centerx, //圆中心x坐标
- centery, //圆中心y坐标
- radius, //圆半径
- startingAngle, //开始弧度
- endingAngle, //结束弧度
- anticlockwise //是否逆时针,默认false
- 圆弧度
- closePath()
- 表示结束当前路径
- 如果当前路径没有闭合,就会自动帮助闭合
- Draw an arc
- 对当前画布指定区域进行一次刷新操作
- context.clearRect(x,y,width,height)
- 获得当前上下文环境下的画布
- context.canvas
- canvas中的内容
canvas中内容只有在canvas不能正常显示时,浏览器才会显示出来的