【JavaScript】JavaScript+html5 canvas绘制的小人效果-html5-canvas-绘制

欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【JavaScript+html5 canvas绘制的小人效果】，下面是详细的讲解！

JavaScript+html5 canvas绘制的小人效果

(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=http://www.jb51.net/article/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+html5 canvas绘制的小人效果的用户互动如下：

　　相关问题：HTML5用canvas怎么实现动画效果

　　答：主要思想： 首先要准备一张有连续帧的图片，然后利用HTML5 Canvas的draw方法在不同的时间间隔绘制不同的帧，这样看起来就像动画在播放。 关键技术点： JavaScript 函数setTimeout()有两个参数，第一个是参数可以传递一个JavaScript方法， 另外一... >>详细

　　相关问题：如何用HTML5 Canvas制作子画面动画

　　答： 首先，你要创建一个HTML页面，其中包含如下canvas标签： 如果你载入以上代码，当然什么也不会出现。那是因为虽然我们有一个canvas标签，但我们还没在上面绘制任何东西。我们来添加一些简单的canvas命令来绘制小箱子吧。 var canvas = null; fun... >>详细

　　相关问题：HTML5、JS的canvas绘制图片的问题。。

　　答：按照你的描述，估计你之前的代码有调用过 ctx.scale 或者 ctx.transform 函数，导致坐标轴被缩放了。 建议找到对应的缩放调用，合理使用 ctx.save 和 ctx.restore 函数，来避免上下文环境污染 >>详细