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

HTML5教程手机阅读

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

使用Canvas绘制向日葵1：

效果如下图：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>HTML5每日一练之Canvas标签的应用-绘制复杂图形</title>
<script type="text/javascript">
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();//填充线条
}
</script>
</head>
<body>
<canvas id="W3Cfuns_canvas" width="600" height="400"></canvas>
</body>
</html>

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

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>HTML5每日一练之Canvas标签的应用-绘制复杂图形</title>
<script type="text/javascript">
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;
}
</script>
</head>
<body>
<canvas id="W3Cfuns_canvas" width="600" height="400"></canvas>
</body>
</html>