html5绘制随机五角星_HTML5 canvas绘制五角星的方法

这篇文章主要介绍了关于HTML5 canvas绘制五角星的方法，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

是HTML5中新增的标签，用于绘制图形，这篇文章主要为大家详细介绍了HTML5 canvas基本绘图之绘制五角星方法，感兴趣的小伙伴们可以参考一下

是HTML5中新增的标签，用于绘制图形，实际上，这个标签和其他的标签一样，其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象，我们可以通过JavaScript脚本来控制该对象进行绘图。

只是一个绘制图形的容器，除了id、class、style等属性外，还有height和width属性。在>元素上绘图主要有三步：

1.获取元素对应的DOM对象，这是一个Canvas对象；

2.调用Canvas对象的getContext()方法，得到一个CanvasRenderingContext2D对象；

3.调用CanvasRenderingContext2D对象进行绘图。

通过对五角星分析，我们可以确定各个顶点坐标的规律，这里需要注意的一点是：在canvas中，Y轴的方向是向下的。

相应代码如下：

var canvas = document.getElementById("canvas");

var context = canvas.getContext("2d");

context.beginPath();

//设置是个顶点的坐标，根据顶点制定路径

for (var i = 0; i < 5; i ) {

context.lineTo(Math.cos((18 i*72)/180*Math.PI)*200 200,

-Math.sin((18 i*72)/180*Math.PI)*200 200);

context.lineTo(Math.cos((54 i*72)/180*Math.PI)*80 200,

-Math.sin((54 i*72)/180*Math.PI)*80 200);

}

context.closePath();

//设置边框样式以及填充颜色

context.lineWidth="3";

context.fillStyle = "#F6F152";

context.strokeStyle = "#F5270B";

context.fill();

context.stroke();

最后效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注jquery中文网！

html5绘制随机五角星_HTML5 canvas绘制五角星的方法相关推荐

html5绘制随机五角星_html5 canvas画五角星（随机生成）
五角星的格定点坐标该如何定位?原理图如下: 源代码: function canvs_start(){ var c = document.getElementById("star") ...
html5绘制随机五角星_HTML5 canvas基本绘图之绘制五角星
是HTML5中新增的标签,用于绘制图形,实际上,这个标签和其他的标签一样,其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象,我们可以通过JavaScript脚本来控 ...
glide加载图片闪烁_html5 canvas绘制图片
举两个新手(我)比较容易范的错误 1.图片声明了,绘制方法也ok了,但是有的时候就可以显示出来,有的时候就显示不出来 function draw(){var c=document.getElement ...
HTML5制作坦克大战游戏+Canvas绘制基础图形——学习笔记一
1.离线存储:1)存储到本地,可以离线浏览网页 2)不用cookie(安全性不太高,来回交互的数据量比较大) 2.语音识别 3.图像识别 4.HTML5游戏 5.CSS3的强大之处:动画和各种选择器 ...
html5基础入门教程之canvas绘制图形
moveTo(x,y) moveTo()方法用于定位绘画的位置,即将点移动到参数x,y所指定的坐标位置. canvas初始化或者调用了beginPath()方法时,绘画开始的位置即原点(0,0),使用 ...
html5中Canvas、绘制线条模糊、常见绘制工具、绘制基本图形、绘制图片、面向对象的方式绘制图形图片、绘制文本、帧动画绘制
Canvas容器: canvas标签用来定义图像的容器,必须配合脚本来绘制图像,canvas也运用于游戏开发.注意:canvas绘制图时会出现线条模糊情况,这是因为显示屏像素和canvas中定义的一个 ...
谷歌图标html5代码,HTML5 canvas绘制chrome浏览器 logo图标_网页代码站(www.webdm.cn)
HTML5 canvas绘制chrome图标使用canvas绘制chrome logo $ele:null, ele:null, context:null } $(function(){ oCanv ...
Canvas学习：封装Canvas绘制基本图形API
Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方法, ...
微信小程序Canvas绘制图案（生成海报、朋友圈海报）
现在小程序生成海报是很常见的,例如生成打卡海报.生成文案.生成宣传图.生成推广图等,都是少不了一个技术,就是图片绘制,有些是通过前端Canvas绘制,有些是通过后端绘制,当然前端Canvas绘制是比较 ...

html5绘制随机五角星_HTML5 canvas绘制五角星的方法

html5绘制随机五角星_HTML5 canvas绘制五角星的方法相关推荐

最新文章

热门文章