JavaScript和html5 canvas如何绘制一个小人的代码

这篇文章主要介绍了javascript+html5 canvas绘制的小人效果,涉及javascript结合html5 canvas图形绘制及颜色随机填充的技巧,需要的朋友可以参考下

本文实例讲述了JavaScript+html5 canvas绘制的小人效果。分享给大家供大家参考，具体如下：

运行效果截图如下：

index.html代码如下：

立即学习“Java免费学习笔记（深入）”；

nbsp;html>          #canvas {    background:black; margin-top:100px; margin-left:200px;   }           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); 

登录后复制

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;  }})();

登录后复制

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

HTML5和jQuery实现弹出创意搜索框层的方法

html5和js绘制图片到canvas的方法

如何使用jQuery和HTML5实现手机摇一摇的换衣特效

以上就是JavaScript和html5 canvas如何绘制一个小人的代码的详细内容，更多请关注【创想鸟】其它相关文章！