这里有新鲜出炉的 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');
- dyl.rect(dyl.createColor(), 60 + offsetX, 0 + offsetY, 185, 100);
- dyl.rect(dyl.createColor(), 100 + offsetX, 100 + offsetY, 100, 50);
- dyl.rect(dyl.createColor(), 20 + offsetX, 150 + offsetY, 260, 200);
- dyl.rect(dyl.createColor(), 80 + offsetX, 350 + offsetY, 30, 110);
- dyl.rect(dyl.createColor(), 190 + offsetX, 350 + offsetY, 30, 110);
- dyl.circle(dyl.createColor(), 115 + offsetX, 55, 20);
- dyl.circle(dyl.createColor(), 190 + offsetX, 55, 20);
- </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) {
- var context = dyl._getContext();
- if (!context) {
- return;
- }
- context.fillStyle = color;
- context.fillRect(x, y, width, height);
- };
- dyl.circle = function(color, x, y, r) {
- var context = dyl._getContext();
- context.save();
- context.fillStyle = color;
- context.beginPath();
- context.arc(x, y, r, 0, 2 * Math.PI);
- context.fill();
- context.stroke();
- };
- 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/0412/267358.html