php画五角星,H5怎样用绘制五角星

这次给大家带来用H5怎样用绘制五角星，怎么H5怎样用绘制五角星？H5绘制五角星的注意事项有哪些，下面就是实战案例，一起来看一下。

是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();

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

php画五角星,H5怎样用绘制五角星相关推荐

H5+javascript 动态绘制五角星
原理手动画五角星感觉谁都会. 这不是有手就行,简简单单.可是用代码画图应该怎样做呢? 其实也很简单在H5画布上无非就是找点,然后按一定的顺序连接这些点.那么问题来了点怎么找啊? 给你整副图,一看就明 ...
python turtle库画一个五角星【Python初学绘制五角星】
一.常用命令 import turtle #导入turtle库 import time #时间模块 turtle.forward() #向前移动 turtle.right() #顺时针旋转 turtl ...
python turtle五角星_Python利用turtle绘制五角星
绘制用到的参数我们存放在data.txt文件中,data.txt文件内容如下: 300,0,144,1,0,0 300,0,144,0,1,0 300,0,144,0,0,1 300,0,144,1, ...
python画五角星为什么144度_使用turtle绘制五角星、分形树
本文实例为大家分享了使用turtle绘制五角星和分形树的具体代码,供大家参考,具体内容如下 turtle 库与之前程序的区别: 没有显示的input()与output() 没有赋值语句大部分语句为 ...
如何用python的turtle画五角星_海龟编辑器五角星怎么画绘制五角星就是这么简单...
海龟编辑器作为一款面向少儿的Python编辑器,它可以让孩子通过图形化的方式学习Python,很多用户在刚开始使用时不知道怎么绘制最基本的图形,小编将绘制五角星的方式通过两种方法进行讲解,想知道的赶快 ...
计算机画图星星怎么画,海龟编辑器五角星怎么画绘制五角星就是这么简单
海龟编辑器作为一款面向少儿的Python编辑器,它可以让孩子通过图形化的方式学习Python,很多用户在刚开始使用时不知道怎么绘制最基本的图形,小编将绘制五角星的方式通过两种方法进行讲解,想知道的赶快 ...
python画五角星为什么144度_海龟编辑器五角星怎么画绘制五角星就是这么简单...
海龟编辑器作为一款面向少儿的Python编辑器,它可以让孩子通过图形化的方式学习Python,很多用户在刚开始使用时不知道怎么绘制最基本的图形,小编将绘制五角星的方式通过两种方法进行讲解,想知道的赶快 ...
python画五角星为什么144度_python绘制五角星
分享一个使用Python绘制的五角星小案例,欢迎留言探讨指正,大佬勿喷,抱拳下面呈上小代码代码: import turtle #导入turtle库包 turtle.fillcolor(" ...
python画五角星-Python第八课绘制五角星1.0
第八课绘制五角星1.0 学习目标: 1. 了解并学会使用turtle库. 2. 复习while循环. 教学重难点: turtle库的使用. 学习内容: 案例2: 使用turtle 库在Python中 ...

php画五角星,H5怎样用绘制五角星

php画五角星,H5怎样用绘制五角星相关推荐

最新文章

热门文章