canvas|【html5画布——使用canvas绘制圆形和弧形】 html5|画布|js

效果： 【canvas|【html5画布——使用canvas绘制圆形和弧形】】
文章图片

代码：

绘制圆形和弧形 > /* 绘制圆形*/ //获得画布并上下文对象 var context = document.getElementById('cavsElem').getContext('2d'); context.beginPath(); //开始路径 context.arc(100,100,100,0,2*Math.PI,true); //绘制圆形，true为逆时针 context.closePath(); //关闭路径 context.fillStyle = 'green'; //设置填充颜色 context.fill(); //填充/* ！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！*/ /* 绘制弧形嘴。。。。。。。。。。。。。*/ context.beginPath(); //开始路径 context.strokeStyle = "#fff"; //设置描边颜色 context.lineWidth = 5; //设置线的粗细context.arc(100,150,25,Math.PI/6,5*Math.PI/6,false); //绘制弧形，false为顺时针 //context.closePath(); //context.arc(50,50,25,Math.PI/6,5*Math.PI/6,false); //context.arc(150,50,25,Math.PI/6,5*Math.PI/6,false); context.stroke(); //描边/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/ /* 绘制弧形222222222222222222222左眼*/ context.beginPath(); //开始路径 context.strokeStyle = "#fff"; //设置描边颜色 context.lineWidth = 5; //设置线的粗细context.arc(50,60,25,Math.PI/400, 5*Math.PI/1,true); //绘制弧形，false为顺时针 //context.closePath(); //context.arc(50,50,25,Math.PI/6,5*Math.PI/6,false); //context.arc(150,50,25,Math.PI/6,5*Math.PI/6,false); context.stroke(); //描边 /*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/ /* 绘制弧形222222222222222222222右眼*/ context.beginPath(); //开始路径 context.strokeStyle = "#fff"; //设置描边颜色 context.lineWidth = 5; //设置线的粗细context.arc(150,60,25,Math.PI/400, 5*Math.PI/1,true); //绘制弧形，false为顺时针 //context.closePath(); //context.arc(50,50,25,Math.PI/6,5*Math.PI/6,false); //context.arc(150,50,25,Math.PI/6,5*Math.PI/6,false); context.stroke(); //描边

canvas|【html5画布——使用canvas绘制圆形和弧形】

推荐阅读

王者荣耀西施你觉得好看吗？

岗梅根的毒副作用和使用禁忌

如何续费云服务器？云服务器欠费怎么续费

提子皮可以吃吗求解提子皮可以吃吗

Android 指定日期时间执行任务的Timer

word打不开,怎么办 word打不开怎么回事

改照片底色的软件如何改照片底色

湿巾放冰箱的好处和注意事项，如何正确维护冰箱

如何清洗排油烟机？排油烟机怎么拆洗服务器

餐厅吊灯高度多少合适餐厅吊灯安装位置在哪合适

游聚怎么开修仙版,为什么我下的游聚总有问题官网下的也安装不了

一人男生总对自己的前女友念念不忘,怎么办？

如何分析gdb数据

每天睡前做八段锦好吗

什么是银行不良资产

2023邯郸最新市人社局及各区县人社局档案管理机构联系电话

一图读懂！西安市最新异地就医直接结算待遇全梳理

上海市农业学校2020录取分数线上海市农业学校分数线

春天的三个阶段

关于友情唯美句子简短句子关于友情唯美句子简短句子英文