案例四、1.使用Canvas画一个五角星

在使用Cnavas元素画一个五角星时，最难的应该是五角星角的坐标。
首先在Canvas元素中，y轴是向下为正。
由于五角星有五个角，圆为360度，所以角与角之间的距离应该为72度。
此时的五角星的十个点的坐标当成是在内外两个圆上排列。读过高中的同学都应该明白图中标示出来的四个点的坐标是怎样算出来的。由于Canvas元素中y轴向下为正，所以sin的值为负。
然后开始画五角星的顶点，用一个循环就可以：

function drawStar(cxt, R, r, x, y){
//ctx为传入的上下文环境，R为外面大圆的半径，r为内部小圆的半径，x为五角星中心的横坐标，y为五角星中心的纵坐标。
for(var i = 0; i < 5; i ++){
ctx.beginPath();
ctx.fillStyle = “yellow”;
ctx.lineTo( Math.cos((18+i*72)/180*Math.PI)*R+x,
-Math.sin((18+i*72)/180*Math.PI)*R+y
);
ctx.lineTo(Math.cos((54+i*72)/180*Math.PI)*r+x,
-Math.sin((54+i*72)/180*Math.PI)*r+y
);
}
ctx.closePath();
ctx.fill();
}
由于Math.cos(),接受的是弧度值，所以我们需要将角度转换为弧度。即：
弧度值 = 角度/180*π；

切记：当我们要画一个封闭的图形时，beginPath()与closePath(),是必须要有的。
当我们想要让所画的五角星旋转一定的角度时，可以传进一个参数在上面的函数中。

function drawStar(cxt, R, r, x, y, a){
//ctx为传入的上下文环境，R为外面大圆的半径，r为内部小圆的半径，x为五角星中心的横坐标，y为五角星中心的纵坐标。a为旋转的角度
for(var i = 0; i < 5; i ++){
ctx.beginPath();
ctx.fillStyle = “yellow”;
ctx.lineTo( Math.cos((18+i*72-a)/180*Math.PI)*R+x,
-Math.sin((18+i*72-a)/180*Math.PI)*R+y
);
ctx.lineTo(Math.cos((54+i*72-a)/180*Math.PI)*r+x,
-Math.sin((54+i*72-a)/180*Math.PI)*r+y
);
}
ctx.closePath();
ctx.fill();
}
这样可以让所画的五角星有一个旋转角度，不再那么死板了。那么接下来考虑如果要画很多个大小不一的星星怎样画。

案例四、1.使用Canvas画一个五角星相关推荐

canva五角星空html,使用canvas绘制一个五角星
一.了解canvas canvas 是HTML5新增的元素,用于在网页上绘制图形.但 canvas 只是图形的容器,必须要通过脚本(通常是JavaScript)来绘制图形. 可以通过多种方法使用can ...
python程序、画一个笑脸_如何使用canvas画一个微笑的表情（代码示例）
本篇文章给大家带来的内容是关于如何使用canvas画一个微笑的表情(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实习期间让我用canvas画一个表情,比较简单,话不多说 ...
[html] 请使用canvas画一个椭圆
[html] 请使用canvas画一个椭圆 <script> var c=document.getElementById("myCanvas"); var ctx=c. ...
[html] 请使用canvas画一个渐变的长方形
[html] 请使用canvas画一个渐变的长方形 // 普通canvas绘图工具类// umd适配多种引入方式 (function(root, factory) {if (typeof define ...
python turtle库画一个五角星【Python初学绘制五角星】
一.常用命令 import turtle #导入turtle库 import time #时间模块 turtle.forward() #向前移动 turtle.right() #顺时针旋转 turtl ...
五角星具有“胜利”的含义。被很多国家的军队作为军官（尤其是高级军官）的军衔标志使用。也常常运用在旗帜上。我们的国旗上就有五角星。请你也画一个五角星吧。
五角星具有"胜利"的含义.被很多国家的军队作为军官(尤其是高级军官)的军衔标志使用.也常常运用在旗帜上.我们的国旗上就有五角星.请你也画一个五角星吧. [输入] 无 [输出] * ...
用canvas画一个太极图（八卦图）
用canvas画一个太极图(八卦图) 源码展示链接: https://yanhappiness.github.io/Notes/canvas_src.html 理解什么是canvas canvas是H ...
如何利用canvas画一个圆，并且填充颜色
如何利用canvas画一个圆,并且填充颜色(小白专用,大佬勿看) canvas基础相信在此之前,你对canvas已经有一定的了解了,接下来我将介绍,如何利用canvas画一个圆. 1.新建一个htm ...
用canvas画一个五星红旗
利用canvas画一个好看的五星红旗!!! 简单,容易上手! <!DOCTYPE html> <html lang="utf-8"> <meta ht ...

案例四、1.使用Canvas画一个五角星

案例四、1.使用Canvas画一个五角星相关推荐

最新文章

热门文章