Canvas 画五角星

前言
几何模型
绘制
拓展
封装

前言

学习 canvas，更多的是需要动手实践，下面就从一个相对简单的例子：五角星开始吧！

不懂 canvas 的同学，请先学习：Canvas 画布

几何模型

由上图可以清晰的得到大概的思路，大圆和小圆上的点相间相连，就可以的到五角星。

我的做法是从右下角开始画。因为 canvas 的坐标系的第一象限，实际上是右下角，而不是右上角。这样，就可以避免纠结于 sin() 和 cos() 的正负关系。

绘制

var canvas = document.getElementById('canvas');
var cxt = canvas.getContext('2d');var w = canvas.width;
var h = canvas.height;
var r1 = w / 2;
var r2 = r1 / 2;
var x1,x2,y1,y2;cxt.translate(r1, r1);
cxt.beginPath();
for (var i = 0; i < 5; i++) {x1 = r1 * Math.cos((54 + i*72)/180*Math.PI);y1 = r1 * Math.sin((54 + i*72)/180*Math.PI);x2 = r2 * Math.cos((18 + i*72)/180*Math.PI);y2 = r2 * Math.sin((18 + i*72)/180*Math.PI);cxt.lineTo(x2, y2);cxt.lineTo(x1, y1);
}
cxt.closePath();cxt.stroke();

获取绘图上下文环境
获取 canvas 的宽高，并由此定义两个圆的半径
将原点重置到 (r, r) 圆心位置
使用 lineTo() 绘制路径

注意：
1. 因为右下角第一个点是小圆上的，所以循环中先画小圆上的点。
2. 在 beginPath() 方法后，可以直接使用 lineTo() 代替 moveTo()。
3. 注意闭合路径使得最后一个点与开始的点连成线。

拓展

这样的五角星太单一，如果想获取其他的五角星形状，该如何处理。

观察下，大圆的半径是由 canvas 的宽高决定的，而小圆的半径则是可以改变的。这里的代码中 r1 = r2 / 2。

试着改变这个比例：

r1 = r2 / 2.5

r1 = r2 / 3

你还可以继续调整得到了不一样的五角星！

封装

为了复用，可以将其封装成两个函数：

/****************************** cxt 为绘图上下文环境* r 为大圆半径* x，y 为相对 canvas 原点的坐标位置 * rot 为顺时针旋转角度****************************/
function draw_start(cxt, r, x, y, rot) {cxt.save();cxt.translate(x, y);cxt.rotate(rot/180*Math.PI);cxt.scale(r, r);startPath(cxt);cxt.stroke();cxt.restore();
}
//五角星标准路径
function startPath(cxt) {cxt.beginPath();for (var i = 0; i < 5; i++) {var x1 = Math.cos((54 + i*72)/180*Math.PI);var y1 = Math.sin((54 + i*72)/180*Math.PI);var x2 = Math.cos((18 + i*72)/180*Math.PI) * 0.5;var y2 = Math.sin((18 + i*72)/180*Math.PI) * 0.5;cxt.lineTo(x2, y2);cxt.lineTo(x1, y1);}cxt.closePath();
}

Canvas 画五角星相关推荐

html5 canvas画五角星（美国队长）
画一波五角星: 美国队长图标原理: (1)根据五角星的顶点,外顶点5个,内顶点5个,分成内外圆 (2)由三角函数可表示出每个顶点的位置 (3)利用canvas的lineTo()接口画图上代码: ...
html5绘制随机五角星_脑残无极限，用HTML5 CANVAS画五角星！
(效果图) 当我开始研究HTML5的时候,canvas在第一时间就吸引住我了.哇塞,这东西未来绝对能取代WINDOWS的画图(小畫家)工具的! 于是本着探索的精神,我重新捡回了中学时期的三角函数,准备 ...
html5绘制随机五角星_html5 canvas画五角星（随机生成）
五角星的格定点坐标该如何定位?原理图如下: 源代码: function canvs_start(){ var c = document.getElementById("star") ...
js使用canvas画五角星以及渐变色，瞎画
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>星云图 ...
案例四、1.使用Canvas画一个五角星
在使用Cnavas元素画一个五角星时,最难的应该是五角星角的坐标. 首先在Canvas元素中,y轴是向下为正. 由于五角星有五个角,圆为360度,所以角与角之间的距离应该为72度. 此时的五角星的十个 ...
python画五角星代码_Python GUI 编程tkinter--画五角星和简单的动画制作
1.利用Python的tkinter画一个五角星: 2.做一个简单的动画分析五角心的五个顶点的坐标: 确立五角星的中心点和半径,再确立五角星的五个角的坐标信息,其中五角星的各个角读书为36度,具体的 ...
使用canvas画美队盾牌
代码如下: <canvas class="mycanvas" width="500" height="500">你的浏览器不支持 ...
java画五角星_如何用Java程序写出五角星?
展开全部第一种,用图形 import java.awt.*; import javax.swing.*; public class WuJiaoXing extends JPanel { priva ...
H5组件Canvas画电子印章
效果图代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

Canvas 画五角星

前言

几何模型

绘制

拓展

封装

Canvas 画五角星相关推荐

最新文章

热门文章