这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JavaScript+html5 canvas 制作色彩斑斓的正方形效果, 实例分析了 JavaScript 结合 html5 canvas 实现图形动态绘制的技巧, 需要的朋友可以参考下
本文实例讲述了 JavaScript+html5 canvas 制作色彩斑斓的正方形效果。分享给大家供大家参考,具体如下:
运行效果截图如下:
index.html:
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
- <title>
- canvas中的透明度
- </title>
- <style type="text/CSS">
- #canvas { background:black; margin-top:100px; margin-left:200px; }
- </style>
- </head>
- <body>
- <canvas id="canvas" width="500px" height="500px">
- </canvas>
- </body>
- <script type="text/javascript" src="canvas.js">
- </script>
- <script type="text/javascript">
- 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);
- }
- }
- </script>
- </html>
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 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0406/267360.html