星空网 > 软件开发 > Java

[HTML5] Canvas绘制简单形状

使用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,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

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>测试canvas</title></head><body><canvas id="myCanvas" width="500px" height="1000px"></canvas><script>  var canvas=document.getElementById('myCanvas');  var context=canvas.getContext("2d");  //绘制矩形  context.fillRect(0,0,100,100);  context.strokeRect(120,0,100,100);  //绘制扇形  context.beginPath();  context.moveTo(50,220);  context.arc(50,220,50,0,Math.PI/4);  context.closePath();  context.fill();  //绘制线段  context.moveTo(0,300);  context.lineTo(100,300);  context.lineTo(100,400);  context.stroke();  //绘制贝塞尔曲线  context.moveTo(200,300);  context.bezierCurveTo(200,300,250,300,300,400);  context.stroke();</script></body></html>

[HTML5] Canvas绘制简单形状

 




原标题:[HTML5] Canvas绘制简单形状

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

广州肯尼亚海运:https://www.goluckyvip.com/tag/92514.html
中国印尼海运:https://www.goluckyvip.com/tag/92515.html
中国到索马里海运:https://www.goluckyvip.com/tag/92516.html
罗马尼亚到中国海运:https://www.goluckyvip.com/tag/92517.html
中国海运到罗马尼亚:https://www.goluckyvip.com/tag/92518.html
几内亚到中国海运:https://www.goluckyvip.com/tag/92519.html
深圳有没有比较好玩的景点 深圳有没有比较好玩的景点推荐一下:https://www.vstour.cn/a/366175.html
长治婚庆女司仪和主持人:https://www.vstour.cn/a/366176.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流