使用 HTML5 canvas 进行 Web 绘图（3）
|
- UID
- 1066743
|
使用 HTML5 canvas 进行 Web 绘图（3）
像素级绘图像素级别的绘图操作是 canvas 绘图区别于 SVG，VML 等绘图技术的最为明显特征之一，渲染上下文提供了 createImageData, getImageData, 和 putImageData 三种方法来进行针对像素的操作，所基于的对象都是 imageData 对象。imageData 对象包含 width、height 和 data 三个属性，其中 data 包含了 width × height × 4 个像素值，之所以乘以 4，在于每个像素都有 RGB 值和透明度 alpha 值。
清单 4 中所示代码为上一节中示例图形增添了简单的颜色反转滤镜效果，通过调用 getImageData(x,y,width,height) 方法获取以（x,y）为左上坐标的矩形区域内所有像素，而后对所有像素的 RGB 值做取反操作，最后通过 putImageData（imageData, x, y）将修改后的像素值重新绘制到在 canvas 上。
图 4. 清单 4 所示示例图形 清单 4. 实现简单滤镜效果1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| function revertImage(){
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var context = canvas.getContext('2d');
// 从指定的矩形区域获取 canvas 像素数组
var imgdata = context.getImageData(100, 100, 100, 100);
var pixels = imgdata.data;
// 遍历每个像素并对 RGB 值进行取反
for (var i=0, n=pixels.length; i<n; i+= 4){
pixels = 255-pixels;
pixels[i+1] = 255-pixels[i+1];
pixels[i+2] = 255-pixels[i+2];
}
// 在指定位置进行像素重绘
context.putImageData(imgdata, 100, 100);
}
}
|
实现动画效果Canvas 并非为了制作动画而出现，自然没有动画制作中帧的概念。因而，使用定时器不断的重绘 canvas 画面成为了实现动画效果的通用解决方式。Javascript 中的 setInterval(code，millisec) 方法可以按照指定的时间间隔 millisec 来反复调用 code 所指向的函数或代码串，这样，通过将绘图函数作为第一个参数传给 setInterval 方法，在每次被调用的过程中移动画面中图形的位置，来最终达到一种动画的体验。需要注意的一点是，虽然 setinterval 方法的第二个参数允许开发人员对绘图函数的调用频率进行设定，但这始终都是一种最为理想的情况，由于这种绘图频率很大程度上取决于支持 canvas 的底层 JavaScript 引擎的渲染速度以及相应绘图函数的复杂性，因而实际运行的结果往往都是要慢于指定绘图频率的。
清单 5 显示了一个小弹力球动画效果，在球没有到达四周边界时，绘图方法不断的移动所绘小球的横纵坐标。并且，在每次重绘之前，都是用 clear 方法将之前的画面清除。
清单 5. 实现小弹力球动画1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <script type="text/javascript">
var x=0,y=0,dx=2,dy=3,context2D; // 小球从（0,0）开始移动，横向步长为 2，纵向步长为 3
function draw(){
context2D.clearRect(0, 0, canvas.width, canvas.height); // 清除整个 canvas 画面
drawCircle(x, y); // 使用自定义的画圆方法，在当前（x,y）坐标出画一个圆
// 判断边界值，调整 dx/dy 以改变 x/y 坐标变化方向。
if (x + dx > canvas.width || x + dx < 0) dx = -dx;
if (y + dy > canvas.height || y + dy < 0) dy = -dy;
x += dx;
y += dy;
}
window.onload = function (){
var canvas = document.getElementById('canvas');
context2D = canvas.getContext('2d');
setInterval(draw, 20); // 设置绘图周期为 20 毫秒
}
</script>
|
|
|
|
|
|
|
