HTML5新特性开发者实践之Canvas线条篇-技术开发专区

HTML5新特性开发者实践之Canvas线条篇

作者：廖煜嵘编辑：胡铭娅 2011-12-02 00:05 IT168网站原创

　　再看一个尺寸变换的例子，依然是上面的例子，只不过改成如下代码，实现的效果是每一秒进行尺寸变换：

　var can = function () {

　　var canvas;

　　var context;

　　var x = 0;

　　var y = 0;

　　function currectX() {

　　return x = x + 1;

　　}

　　function currectY() {

　　return y = y + 1;

　　}

　　return {

　　draw: function () {

　　var r = Math.floor(Math.random() * 255) + 70;

　　var g = Math.floor(Math.random() * 255) + 70;

　　var b = Math.floor(Math.random() * 255) + 70;

　　var s = ‘rgba(‘ + r + ‘,’ + g + ‘,’ + b + ‘, 0.5)’;

　　context.fillStyle = s;

　　context.scale(1.2,1.2);

　　context.fillRect(currectX(), currectY(), 5, 5);

　　},

　　init: function () {

　　canvas = document.getElementById(“myCanvas”);

　　context = canvas.getContext(“2d”);

　　context.translate(0, 0);

　　setInterval(can.draw, 1000);

　　}

　　}

　　} ();

　　window.onload = can.init;

　　实现的效果静态图如下：

▲

　　

0

第1页：在canvas中绘画文字第2页：在canvas中绘制图片和处理视频第3页：形状变化和动画第4页：实现的效果是每一秒进行尺寸变第5页：Canvas中的鼠标操作

相关文章

关注我们