html制作发光正方形,JavaScript+html5 canvas制作色彩斑斓的正方形效果_javascript技巧...

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

运行效果截图如下：

index.html：

canvas中的透明度

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程序设计有所帮助。

声明：本文原创发布php中文网，转载请注明出处，感谢您的尊重！如有疑问，请联系admin@php.cn处理