HTML5培训学习绘制图形3

2017-07-14 10:44:00

HTML5绘制图形中样式和颜色的使用
1、fillStylestrokeStyle属性的使用
 
(1)如何使用fillStyle属性绘制一个渐变的方格矩阵?
fillStyle属性用于设置颜色的填充,绘制方格矩阵,需要用到for循环,这样能快速的创建多个矩形并为其设置颜色。下面给出一个创建方格矩阵的实例:









<script type="text/javascript">
window.onload=function draw(rect) {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
for(var i = 0; i < 5; i++) {
for(var j = 0; j < 5; j++) {
ctx.fillStyle = 'rgb(0,' + Math.floor(255 - 51 *
i) + ',' + Math.floor(255 - 51 * j) + ')';
ctx.fillRect(j * 25, i * 25, 25, 25);
}
}
}
</script>



这里使用两层for循环来绘制方格阵列,每个方格都由i和j的值控制颜色。使用rgb设置颜色。ctx.fillRect(x1,y1,width,height)设置矩形的位置和大小x1和y1分别为矩形起始位置,x2和y2分别为矩形的宽度和高度。Window.onload用来执行函数,Math.floor()是向下取整计算。
运行代码,得到的结果如图:

 
 
(2)如何使用strokeStyle属性绘制奥运五环?
strokeStyle属性用于设置画布中笔触的颜色,一般用于设置边框等颜色。这里使用strokeStyle属性来画出一个五环。实例代码:






<script type="text/javascript">
function ring(id){
var canvas = document.getElementById(id);
var ctx = canvas.getContext('2d');
 
ctx.lineWidth = 2;
ctx.beginPath();
ctx.arc(40,40,30,Math.PI*2,0);
ctx.strokeStyle = 'blue';
ctx.stroke();

ctx.beginPath();
ctx.arc(110,40,30,Math.PI*2,0);
ctx.strokeStyle = 'black';
ctx.stroke();

ctx.beginPath();
ctx.arc(180,40,30,Math.PI*2,0);
ctx.strokeStyle = 'red';
ctx.stroke();

ctx.beginPath();
ctx.arc(75,70,30,Math.PI*2,0);
ctx.strokeStyle = 'yellow';
ctx.stroke();

ctx.beginPath();
ctx.arc(150,70,30,Math.PI*2,0);
ctx.strokeStyle = 'green';
ctx.stroke();
}
</script>





运行上诉代码,可以得到由五个不同颜色的圆组成的图案。代码中分别对五个圆形设置颜色,设置圆环的线宽为2,。Onload属性一般放在标签里面一旦完全加载所有内容(包括图像、脚本文件、CSS 文件等),就执行一段脚本。

 

(3)如何用globalAlpha设置一组渐变同心圆?
可以用来绘制一些半透明的图形,可以通过设置globalAlpha属性来实现。
JavaScript语法:context.globalAlpha=number
number为透明值,必须设置为0.0(完全透明)-1.0(完全不透明)之间的数字。
下面通过实例来讲解globalAlpha的使用:








<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.globalAlpha = 0.4;
for (var i=0;i<5;i++) {
ctx.arc(75,75,15+15*i,Math.PI*2,false);
ctx.fillStyle = 'darkgoldenrod';
ctx.fill();
}
</script>


 
运行上诉代码,这里可以看到一个由多个圆组成的同心圆,由圆心向周围颜色变浅。因为是由多个圆组成的,所以每次画一个圆,圆心方向的颜色就会变深一点。这种绘制图形的方式用于绘制大量的相同透明度的图形。

 
 

上一篇: 第一页

iOS QQ群

HTML5 QQ群

飞雀动态

行业新闻

Copyright © 2015-2016 Future education technology co., LTD All Rights Reserved