HTML5输出字母围成的正方形,JavaScript+html5 canvas制作色彩斑斓的正方形效果

最新推荐文章于 2023-09-02 14:36:14 发布

勃加蕊

最新推荐文章于 2023-09-02 14:36:14 发布

阅读量151

点赞数

文章标签： HTML5输出字母围成的正方形

本文展示了如何使用JavaScript和HTML5的Canvas API创建一个色彩斑斓的正方形网格效果。通过循环和定时器，动态地改变每个正方形的透明度，实现了视觉上的动态效果。代码包括了对canvas的初始化、颜色生成、矩形绘制等功能函数的详细实现。

摘要由CSDN通过智能技术生成

本文实例讲述了JavaScript+html5 canvas制作色彩斑斓的正方形效果。分享给大家供大家参考，具体如下：

运行效果截图如下：

index.html：

canvas中的透明度

#canvas {

background:black; margin-top:100px; margin-left:200px;

}

cache = {};

var offsetX = 50,

offsetY = 20;

cache.context = dyl.createContext('canvas');

for(var i=0; i<10; i++) {

for(var j=0; j<10; j++) {

var alpha = j * 0.1 + 0.1;

(function(i, j ,alpha) {

setTimeout(function() {

dyl.rect(dyl.createColor(), i*50, j*50, 100, 100, alpha);

}, 100*j*i);

})(i, j ,alpha);

}

canvas.js：

(function() {

var dyl = {cache: {}};

dyl.setContext = function(context) {

dyl.cache._context = context;

return context;

};

dyl.getDom = function(id) {

return document.getElementById(id);

};

dyl._getContext = function() {

return dyl.cache._context;

};

dyl.save = function() {

var context = dyl._getContext();

context ? context.save() : void(0);

};

dyl.restore = function() {

var context = dyl._getContext();

context ? context.restore() : void(0);

};

dyl.createContext = function(canvasID) {

var canvas = this.getDom(canvasID);

if(!canvas) {

return null;

}

return dyl.setContext(canvas.getContext("2d"));

};

dyl.createColor = function() {

var color = "rgb(";

color += Math.round(Math.random()*255);

color += ",";

color += Math.round(Math.random()*255);

color += ",";

color += Math.round(Math.random()*255);

color += ")";

return color;

};

dyl.addImg = function(img, x, y) {

var context = dyl._getContext();

if(!img || !context) {

return;

}

if(typeof img === "string") {

var oImg = new Image();

oImg.src = img;

oImg.onload = function() {

context.drawImage(oImg, x, y);

}

return;

}

context.drawImage(img, x, y);

};

dyl.rect = function(color, x, y, width, height, alpha) {

var context = dyl._getContext();

if(!context) {

return;

}

context.save();

context.fillStyle = color;

context.globalAlpha = alpha ? alpha : 1;

context.fillRect(x, y, width, height);

context.restore();

};

dyl.circle = function(color, x, y, r, alpha) {

var context = dyl._getContext();

context.save();

context.fillStyle = color;

context.beginPath();

context.globalAlpha = alpha ? alpha : 1;

context.arc(x, y, r, 0, 2*Math.PI);

context.fill();

context.stroke();

};

dyl.clearRect = function(x, y, width, height) {

var context = dyl._getContext();

if(!context) {

return;

}

context.clearRect(x, y, width, height);

};

dyl.scale = function(x, y) {

var context = dyl._getContext();

if(!context) {

return;

}

x = x ? x : 1;

y = y ? y : 1;

context.scale(x, y);

};

if(!window.dyl) {

window.dyl = dyl;

}

})();

希望本文所述对大家JavaScript程序设计有所帮助。