Canvas基础积累
Canvas基础积累
迹_Jason
发布于 2019-05-30 20:31:25
发布于 2019-05-30 20:31:25
创建canvas
<canvas id="canvas"></canvas>- 一般都要存在ID
- width和height建议直接在
<canvas>中直接设定，不要使用css的方式去设定长和高，并且其是没有px单位的，因其也表示精度 - width和height还可以使用JS的方式进行设定，在Element对象中存在width和height属性，可以进行设定
获取Canvas对象
var canvas=document.getElementById("canvas");
var context= canvas.getContext();context就是canvas对象，接下来都是对其进行操作
设置width和height
canvas.width = 1024;
canvas.height = 768;直线
context.strokeStyle="#005588";//设置颜色，red这种方式也是可以的
context.lineWidth=5;//线宽
context.moveTo(100,100);//表示画笔的起点坐标
context.lineTo(700,700);//表示下一笔的坐标
context.lineTo(1000,700);//表示下一笔的坐标
context.stroke();//绘制线条多边形
context.fillStyle="rgb(2,100,30)";//颜色
context.moveTo(100,100);//表示画笔的起点坐标
context.lineTo(700,700);//表示下一笔的坐标
context.lineTo(1000,700);//表示下一笔的坐标
context.fill();context.fillStyle="rgb(2,100,30)";//颜色
context.arc( x , y , RADIUS , 0 , 2*Math.PI,false )//画圆，参数依次：横坐标，纵坐标，半径，画圆起点，画圆终点，是否为顺时针方向画圆
context.fill();fill()会将颜色填充
开始和结束
context.fillStyle="rgb(2,100,30)";//颜色
context.moveTo(100,100);//表示画笔的起点坐标
context.lineTo(700,700);//表示下一笔的坐标
context.lineTo(1000,700);//表示下一笔的坐标
context.fill();
context.strokeStyle="#005588";//设置颜色，red这种方式也是可以的
context.lineWidth=5;//线宽
context.moveTo(100,100);//表示画笔的起点坐标
context.lineTo(700,700);//表示下一笔的坐标
context.lineTo(1000,700);//表示下一笔的坐标
context.stroke();//绘制线条这代码显示的结果，其实不是我们想的那样，其实还是存在一些问题，因fill()上方的路径状态还是存在有效的，所以为了解决这个问题，引入了beginPath()和closePath()
- beginPath():开始路径，表示画笔状态的开始
- closePath():结束路径，结束一个路径，如果路径不是封闭的，会将其变为封闭
清除
context.clearRect(0,0,1024, 768);参数表示清除的坐标范围
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2016-07-12，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录