canvas绘制五角星

<!DOCTYPE html>
<html lang="en">
<body>
<canvas width="900" height="900" id="myCanvas"></canvas>
<script>
var myCanvas = document.getElementById("myCanvas");
var context = myCanvas.getContext(‘2d‘);
context.fillStyle = ‘rgb(255,100,0)‘;
context.lineWidth = 5;
var x=720,y=200;
for(var i=0;i<9;i++)
{
context.beginPath();
var x1 = 200*Math.sin(Math.PI/10);
var h1 = 200*Math.cos(Math.PI/10);
var h2 = 100*Math.tan(Math.PI/5);
context.lineTo(x+x1,y+h1);
context.lineTo(x-100,y+h2);
context.lineTo(x+100,y+h2);
context.lineTo(x-x1,y+h1);

context.lineTo(x,y);
context.fill();

}
</script>
</body>
</html>

代码就这样简简单单的完成了，运行结果图片如下：

时间： 2024-10-12 17:27:49

canvas绘制五角星的相关文章

HTML5 Canvas 绘制五角星

代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>五角星</title> </head> <body onload="draw()"> &

canvas 绘制五角星

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body onload="star()"> <canvas id="canvas" width="800" height="

html5 canvas绘制圆形印章，以及与页面交互

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>HTML5 Canvas画印章</title> 6 <script type="text/javascript" src="../JQmain/jquery-2.2.0.min.js"></script> 7 &l

canvas绘制国旗样式

今天绘制的是国旗: 代码如下: <html><head> <script> var col=new Array("red","brown"); var ticker=0; var step=0; function drawBackground(){ var g=document.getElementById("background").getContext("2d"); var grd=g.

HTML5用canvas绘制五星红旗

在HTML5一览中,我们提到html 5被冠以很多高帽,其中最高的一顶.备受争议的就是"Flash杀手".IT评论界老喜欢用这个词了,杀手无处不在.不管是不是杀手,HTML 5引进的一些新特性确实让人兴奋不已.最令人期待的之一就是 canvas元素. 作为HTML5标准的一部分,Canvas元素允许脚本动态渲染点阵图像.这个 HTML 元素是为了客户端矢量图形而设计的.它自己没有行为,但却把一个绘图 API 展现给客户端 javascript 以使脚本能够把想绘制的东西都绘制到一块画布

用canvas绘制折线图

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>用canvas绘制折线图</title> 6 </head> 7 <body> 8 <canvas id="cv"></canvas> 9 </body> 1

封装 用canvas绘制直线的函数--面向对象

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>用面向对象的思想 封装 在canvas绘制直线的函数</title> 6 </head> 7 <body> 8 <canvas id="cv"></canvas> 9 &

canvas绘制时钟

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas绘制钟表</title> <style type="text/css"> #canvas{ /*border: 2px solid red;*/ display: block; margin: 0 auto; } </style> </

html5 Canvas绘制图形入门详解

html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome.Opera.Safari.IE9+)都已经开始支持html5了.除此之外,在移动浏览器市场上,众多的移动浏览器也纷纷展开关于「html5的支持能力以及性能表现」的军备竞赛.html作为革命性的网页技术标准,再加上众多浏览器厂商或组织的鼎力支持,可以想见,html5将会成为未来网页技术的领头羊. ht