使用canvas来进行绘画,它像很多其他dom对象一样,有很多属性和方法,操作这些方法,实现绘画
获取canvas对象,调用document.getElementById()方法
调用canvas对象的getContext()方法,获取context对象,参数:String的”2d”
绘制线段
调用context对象的moveTo()方法,把起点位置定义好,参数:x,y
调用context对象的lineTo()方法,把终点位置定义好,参数:x,y
调用context对象的stroke()方法,画一条线
如果不调用moveTo()方法,起点的位置是上次的点
绘制矩形
调用context对象的fillRect()方法,填充矩形,参数:起点横坐标,起点纵坐标,宽度,高度
调用context对象strokeRect()方法,边框矩形,参数:起点横坐标,起点纵坐标,宽度,高度
例如:context.fillRect(0,100,100); 会画出一个黑色的矩形
注意:html5 canvas fillRect坐标和大小一直不对,是因为canvas的宽度和高度必须内联在canvas标签中才对
绘制扇形
调用context对象的beginPath()方法,开启路径
调用context对象的moveTo()方法,把路径移动到圆心位置,参数:x,y
调用context对象的arc()方法,绘制圆弧,参数:圆心x坐标,圆心y坐标,开始角度,结束角度
调用context对象的closePath()方法,关闭路径
调用context对象的fill()方法,填充颜色
绘制贝塞尔曲线
调用context对象的bezierCurveTo()方法,绘制曲线路径,
参数:第一控制点x,第一控制点y,
第二控制点x,第二控制点y,
最终控制点x,最终控制点y
Meta测试canvas
context.fillRect(0,0,100,100);
context.strokeRect(120,100);
context.beginPath();
context.moveTo(50,220);
context.arc(50,220,50,Math.PI/4);
context.closePath();
context.fill();
context.moveTo(0,300);
context.lineTo(100,400);
context.stroke();
context.moveTo(200,300);
context.bezierCurveTo(200,300,250,400);
context.stroke();script>
body>
html>
总结
如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
小编个人微信号 jb51ccc
喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!