用canvas属性写一个五角星哦

canvas属性中的线条属性学完后，就可以自己写一个简单好看的五角星啦

先是最简单的画布属性的获取

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
<style>
</style>
</head>
<body>
<canvas id="canvas" width="800" height="800" style="border:solid 1px gray;">您的浏览器不支持canvas，建议使用最新版的Chrome
</canvas>
<script type="text/javascript">
  var canvas=document.getElementById('canvas');
  var ctx=canvas.getContext('2d');</script></body></html>

对于不支持<canvas></canvas>属性的浏览器，上面那段文字就会跳出提示信息。而支持则会忽视上诉文字。

接着就是js部分的编写了

window.οnlοad=function(){drawStar(ctx,200,100,400,400,30);
}function drawStar(cxt,r,R,x,y,rot){cxt.lineWidth=10;cxt.lineJoin="round";cxt.beginPath();for(var i=0; i<=5; i++){cxt.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+x,-Math.sin((18+i*72-rot)/180*Math.PI)*R+y);cxt.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+x,-Math.sin((54+i*72-rot)/180*Math.PI)*r+y);}cxt.closePath();cxt.stroke();
}

上诉代码中，我们写了一个drawStar（）的函数，传进了6个参数，分别为：cxt（绘图环境），r（代表小圆半径），R（大圆半径），x（在x轴上的移动量），y（在y轴上的移动量），rot（整个五角星的偏移量）。

cxt.lineWidth:这个属性是线条的宽度。

cxt.lineJoin:这个属性是线条交接处的处理方式。有“bevel”,"round","mitter"三个属性，分别什么样子呢，自己试试吧。其中mitter还有mitterLimit这个属性。canvas给这个属性一个适合值为10，所以如果要用cxt.mitterLimit=10;就这样写啦！

路径开始beginPath(),路径结束closePath();(PS: closePath() 多写有好处，不写也还好，但有时候会有小问题)。

接下来这个for循环就是五角星的绘制。那绘制五角星其实是基于一个同心圆上的，就像这样

lineTo()里面两个参数分别为坐标（x，y），其中需要计算x，y对应的表达式，对于数学都很帮帮的你们来说，小case啦！

最后用两个lineTo（）绘制线段，连接起来，用Stroke（）画出图形，再调用drawStar()函数就好了。参数不同，五角星也不一样哦！！

转载于:https://www.cnblogs.com/shuixiaohao/p/6618055.html

用canvas属性写一个五角星哦相关推荐

俄罗斯小方块游戏html,通过h5的canvas手写一个俄罗斯方块小游戏
开始自己手写一个好玩的俄罗斯方块吧,上变形,左右移动,下加速,空格瞬移等功能,无聊的时候学习下canvas,f12 修改分数,体验金手指的快乐吧 1.定义界面,和按钮上下左右 2.js部分 1 ...
canvas笔记-画一个五角星（含算法）
算法如下: 上面的图是正三角形: 说下算法,关于上面那些x,y是怎么算出来的. 这里大圆的5个顶点,每个顶点占用的角度为360/5 = 72度,左边那个18度是通过90 - 72 = 18度. 大圆半 ...
canva五角星空html,使用canvas绘制一个五角星
一.了解canvas canvas 是HTML5新增的元素,用于在网页上绘制图形.但 canvas 只是图形的容器,必须要通过脚本(通常是JavaScript)来绘制图形. 可以通过多种方法使用can ...
Day14作业三、编程题写一个Student类，属性：名字，年龄，分数，班级 (注意分包)
三.编程题写一个Student类,属性:名字,年龄,分数,班级 (注意分包) 写一个测试类:创建一个集合,里面装6个学生(有三个班级class01,class02,class03) 例如:list. ...
[js] 用js写一个方法检测浏览器是否支持css3的属性
[js] 用js写一个方法检测浏览器是否支持css3的属性 var div = document.createElement('div'); console.log(div.style.transit ...
写一个类Army,代表一支军队，这个类有一个属性Weapon数组w（用来存储该军队所拥有的所有武器），该类还提供一个构造方法，在构造方法里通过传一个int类型的参数来限定该类所能拥有
代码 /*开放型题目,随意发挥:写一个类Army,代表一支军队,这个类有一个属性Weapon数组w(用来存储该军队所拥有的所有武器),该类还提供一个构造方法,在构造方法里通过传一个int类型的参数来限 ...
（一）、写一个怪物的类，类中有属性姓名(name),攻击力(attack)，有打人的方法(fight)。（方法的重写）...
(一).写一个怪物的类,类中有属性姓名(name),攻击力(attack),有打人的方法(fight). 再写两个子类: 红猪的类:类中有属性姓名(name),攻击力(attack),颜色(color ...
怎么画图自动生成HTML,用canvas写一个简易画图工具
本文将为您描述用canvas写一个简易画图工具,具体操作方法: Document style="border:1px solid #000000;">您的浏览器不支持canv ...
简单的面向对象思想，写一个传奇人物的属性
简单的面向对象思想,写一个传奇人物的属性 package com.hz.game;import java.util.Random;/*** //hat,weapon,necklace,ring,clo ...

用canvas属性写一个五角星哦

用canvas属性写一个五角星哦相关推荐

最新文章

热门文章