史上最详细的使用canvas绘制五星红旗的方法 |
您所在的位置：网站首页 › 外地人员可以在当地办理离婚吗 › 史上最详细的使用canvas绘制五星红旗的方法 |
史上最详细的使用canvas绘制五星红旗的方法
|
史上最详细的使用canvas绘制五角星的方法
昨天我们在课堂上讲到了HTML5中的canvas标签，canvas标签用于绘制图像（通过脚本，通常是 JavaScript）。当天布置的作业就是利用canvas画布绘制五星红旗。如图： 上篇文章我们已经讲到了五星红旗的制法说明。 （一）旗面为红色，长方形，其长与高为三与二之比，旗面左上方缀黄色五角星五颗。一星较大，其外接圆直径为旗高十分之三，居左；四星较小，其外接圆直径为旗高十分之一，环拱于大星之右。旗杆套为白色。 （二）五星之位置与画法如下: 为便于确定五星之位置，先将旗面对分为四个相等的长方形，将左上方之长方形上下划为十等分，左右划为十五等分。大五角星的中心点，在该长方形上五下五、左五右十之处。其画法为:以此点为圆心，以三等分为半径作一圆。在此圆周上，定出五个等距离的点，其一点须位于圆之正上方。然后将此五点中各相隔的两点相联，使各成一直线。此五直线所构成之外轮廓线，即为所需之大五角星。五角星之一个角尖正向上方。四颗小五角星的中心点，第一点在该长方形上二下八、左十右五之处，第二点在上四下六、左十二右三之处，第三点在上七下三、左十二右三之处，第四点在上九下一、左十右五之处。其画法为:以以上四点为圆心，各以一等分为半径，分别作四个圆。在每个圆上各定出五个等距离的点，其中均须各有一点位于大五角星中心点与以上四个圆心的各联结线上。然后用构成大五角星的同样方法，构成小五角星。此四颗小五角星均各有一个角尖正对大五角星的中心点。效果如图： 接下来我们来讲解一下怎样使用canvas画布来绘制五星红旗。 HTML代码： CSS代码： * { margin: 0; padding: 0; } canvas { background: red; }Javascript代码： //获取画布 var oCanvas = document.getElementById("my_canvas"); // 设置画布的尺寸 oCanvas.width = 300; oCanvas.height = 200; // 获取/创建画布环境 var myCanvas = oCanvas.getContext("2d"); // 画线条函数 function line(x1, y1, x2, y2) { myCanvas.moveTo(x1,y1); myCanvas.lineTo(x2,y2); myCanvas.stroke(); } // line(0,100,300,100); // line(150,0,150,200); // 画网格 横线 参考线 // for (var i = 0; i < 10; i++) { // myCanvas.moveTo(0, i * 10); // myCanvas.lineTo(150, i * 10); // myCanvas.stroke(); // } // 竖线 // for (var i = 0; i < 15; i++) { // myCanvas.moveTo(i * 10, 0); // myCanvas.lineTo(i * 10, 100); // myCanvas.stroke(); // } // 画参考圆的方法 function circle(x, y, r) { myCanvas.beginPath(); myCanvas.arc(x, y, r, 0, Math.PI * 2); myCanvas.strokeStyle = "yellow"; myCanvas.stroke(); } // 画大圆 // circle(50, 50, 30); // 画小圆 // circle(100, 20, 10); // circle(120, 40, 10); // circle(120, 70, 10); // circle(100, 90, 10); // 画大五角星 star(50, 50, 30,0); // 画小五角星 star(100, 20, 10,Math.atan((50-20)/(50-100))-Math.PI/2); star(120, 40, 10,Math.atan((50-40)/(50-120))-Math.PI/2); star(120, 70, 10,Math.atan((50-70)/(50-120))-Math.PI/2); star(100, 90, 10,Math.atan((50-90)/(50-100))-Math.PI/2); // 绘制五角星的方法 function star(x, y, r,deg) { myCanvas.save(); myCanvas.translate(x, y); myCanvas.rotate(deg) myCanvas.beginPath(); var x = 0, y = 0; var du = Math.PI * 4 / 5; for (var i = 0; i |
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |