HTML5每日一练之Canvas标签的应用-绘制向日葵
时间:2021-07-01 10:21:17
帮助过:57人阅读
本节主要是对之前我们学习的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 < 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>
-
-
-
-
使用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 < 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>
-
-
-
-