这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 js+canvas 绘制五角星的方法, 涉及 JavaScript 调用 canvas 组件结合数学运算绘制图形的相关技巧, 需要的朋友可以参考下
本文实例讲述了 js+canvas 绘制五角星的方法。分享给大家供大家参考,具体如下:
运行效果截图如下:
具体代码如下:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>
- canvas绘制五角星
- </title>
- <script type="text/javascript">
- window.onload = function() {
- var canvas = document.getElementById("canvas");
- if (canvas) {
- var context = canvas.getContext("2d");
- drawStar(context, 50, 100, 100);
- } else {
- document.writeln("浏览器不支持canvas组件");
- }
- }
- function drawStar(context, r, x, y) {
- context.lineWidth = 5;
- context.beginPath();
- var dit = Math.PI * 4 / 5;
- var sin = Math.sin(0) * r + y;
- var cos = Math.cos(0) * r + x;
- console.log(0 + ":" + 0);
- context.moveTo(cos, sin);
- for (var i = 0; i < 5; i++) {
- var tempDit = dit * i;
- sin = Math.sin(tempDit) * r + y;
- cos = Math.cos(tempDit) * r + x;
- context.lineTo(cos, sin);
- console.log(sin + ":" + sin + ":" + tempDit);
- }
- context.closePath();
- context.strokeStyle = "red";
- context.fillStyle = "#DDDDDD";
- context.fill();
- }
- </script>
- </head>
- <body>
- <canvas id="canvas">
- </canvas>
- </body>
- </html>
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0713/267315.html