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

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

使用Canvas绘制向日葵1：

效果如下图：

HTML5每日一练之Canvas标签的应用-绘制复杂图形 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 { 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”的改进，主要是对线条颜色、填充颜色、以及坐标随机的进行计算。

HTML5每日一练之Canvas标签的应用-绘制复杂图形 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 { 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; }

查看更多关于HTML5每日一练之Canvas标签的应用-绘制向日葵的详细内容...