山东钢结构建设局网站,广州新际网站建设公司怎么样,网页设计基础教程第二版课后答案,会员充值消费管理系统注意#xff1a; context.arc(横坐标,纵坐标,弧半径,起始角度,终止角度,逆顺时针);这个函数挺难用#xff0c;主要原因是最后参数和角度的关系。不管文档怎么说#xff0c;按我的实际经验#xff0c;逆顺时针false时#xff0c;是逆时针旋转#xff1b;逆顺时针true时 context.arc(横坐标,纵坐标,弧半径,起始角度,终止角度,逆顺时针);这个函数挺难用主要原因是最后参数和角度的关系。不管文档怎么说按我的实际经验逆顺时针false时是逆时针旋转逆顺时针true时是顺时针旋转。搞清楚这个再来看角度。看下面语句 context.arc(x,y,r,getRad(60),getRad(120),false);这句话意思是以x,y为圆心半径r画弧逆时针转60度为起始点逆时针转120度为终止点。另外逆顺时针不要换来换去坚持习惯的方式画到底最好。 代码 !DOCTYPE html
html langutf-8
meta http-equivContent-Type contenttext/html; charsetutf-8/
headtitle六叶草/title/headbody onloaddraw()canvas idmyCanvus width204px height204px styleborder:1px dashed black;出现文字表示你的浏览器不支持HTML5/canvas/body
/html
script typetext/javascript
!--function draw(){var canvasdocument.getElementById(myCanvus);var contextcanvas.getContext(2d);context.fillStyle #336699;context.fillRect(0, 0, 204, 204);context.translate(102,102);//context.rotate(Math.PI/6);var r100;// 半径
context.beginPath(); context.arc(0,0,r,0,getRad(360),false); context.fillStylewhite; context.closePath(); context.fill(); context.beginPath(); context.arc(r*Math.cos(getRad(60)),r*Math.sin(getRad(60)),r,getRad(240),getRad(300),false);// 顺时针转240度为起点到300度为终点context.arc(r*Math.cos(getRad(60)),-r*Math.sin(getRad(60)),r,getRad(60),getRad(120),false); // 顺时针转60度为起点到120度为终点context.fillStyle#336699; context.closePath(); context.fill();context.beginPath(); context.arc(r,0,r,getRad(180),getRad(240),false);context.arc(-r*Math.cos(getRad(60)),-r*Math.sin(getRad(60)),r,getRad(0),getRad(60),false); context.fillStyle#336699; context.closePath(); context.fill();context.beginPath(); context.arc(r*Math.cos(getRad(60)),-r*Math.sin(getRad(60)),r,getRad(120),getRad(180),false);context.arc(-r,0,r,getRad(300),getRad(360),false); context.fillStyle#336699; context.closePath(); context.fill();context.beginPath(); context.arc(-r*Math.cos(getRad(60)),-r*Math.sin(getRad(60)),r,getRad(60),getRad(120),false);context.arc(-r*Math.cos(getRad(60)),r*Math.sin(getRad(60)),r,getRad(240),getRad(300),false); context.fillStyle#336699; context.closePath(); context.fill();context.beginPath(); context.arc(r*Math.cos(getRad(60)),r*Math.sin(getRad(60)),r,getRad(180),getRad(240),false);context.arc(-r,0,r,getRad(0),getRad(60),false); context.fillStyle#336699; context.closePath(); context.fill();context.beginPath(); context.arc(-r*Math.cos(getRad(60)),r*Math.sin(getRad(60)),r,getRad(300),getRad(360),false);context.arc(r,0,r,getRad(120),getRad(180),false); context.fillStyle#336699; context.closePath(); context.fill();}function getRad(degree){return degree/180*Math.PI;}
//--
/script 转载于:https://www.cnblogs.com/xiandedanteng/p/7469783.html
