HTML5每日一练之Canvas标签的应用-绘制向日葵

本节主要是对之前我们学习的Canvas进行一个小小的复习，没有用到新的技术，唯一用到的就是新的数学算法。

使用Canvas绘制向日葵1：

效果如下图：

• window.onload = function()
• {
• var canvas = document.getElementById("W3Cfuns_canvas");
• var context = canvas.getContext("2d");//取得图形上下文 graphics context
• var dx = 150;//x坐标
• var dy = 150;//y坐标
• var s = 100;//图案半径
• //圆角外侧的钉
• var dig = Math.PI / 15 * 11;
• context.fillStyle = "#eee";//填充canvas的背景颜色
• context.fillRect(0, 0, 600, 400);//参数分别表示 x轴,y轴,宽度,高度
• context.beginPath();//创建路径
• context.fillStyle = "rgb(100, 255, 255)";//填充颜色 也可以使用 #900十六进制颜色
• context.strokeStyle = "rgb(0, 0, 100)";//线条颜色 也可以使用 #900十六进制颜色
• for(var i = 0; i < 30; i++)
• {
• var x = Math.sin(i * dig);//计算钉的位置x坐标
• var y = Math.cos(i * dig);//计算钉的位置y坐标
• context.lineTo(dx + x * s, dy + y * s);//画出x - y的图案
• }
• context.closePath();//关闭路径
• context.fill();//填充颜色
• context.stroke();//填充线条
• }

使用Canvas绘制向日葵2
以下绘制方法为“使用Canvas绘制向日葵1”的改进，主要是对线条颜色、填充颜色、以及坐标随机的进行计算。

• window.onload = function()
• {
• window.setInterval(function()
• {
• var canvas = document.getElementById("W3Cfuns_canvas");
• var context = canvas.getContext("2d");
• var n = 0;
• var dx = parseInt(Math.random()*(600 - 0 + 1) + 0);
• var dy = parseInt(Math.random()*(400 - 0 + 1) + 0);
• var s = parseInt(Math.random()*(300 - 30 + 1) + 30);
• var dig = Math.PI / 15 * 11;
• context.fillStyle = "#eee";
• context.fillRect(0, 0, 600, 400);
• context.beginPath();
• context.fillStyle = toRGB(parseInt(Math.random()*(255 - 0 + 1) + 0),parseInt(Math.random()*(255 - 0 + 1) + 0),parseInt(Math.random()*(255 - 0 + 1) + 0));
• context.strokeStyle = toRGB(parseInt(Math.random()*(255 - 0 + 1) + 0),parseInt(Math.random()*(255 - 0 + 1) + 0),parseInt(Math.random()*(255 - 0 + 1) + 0));
• for(var i = 0; i < 30; i++)
• {
• var x = Math.sin(i * dig);
• var y = Math.cos(i * dig);
• context.lineTo(dx + x * s, dy + y * s);
• }
• context.closePath();
• context.fill();
• context.stroke();
• },100);//此处为0，表示0毫秒绘画一次，可以设置1000，那么就是1秒画一次
• }
• function addZero(string)
• {
• return string.length == 2 ? string : '0' + string;
• }
• function toRGB(redValue, greenValue, blueValue)
• {
• var
• rgbR = addZero(redValue.toString(16), 2),
• rgbG = addZero(greenValue.toString(16), 2),
• rgbB = addZero(blueValue.toString(16), 2);
• var rgb = "#" + rgbR + rgbG +rgbB;
• return rgb;
• }

本文转载自【PHP中文网】，希望能给您带来帮助，苟日新、日日新、又日新，生命不息，学习不止。