JavaScript+html5 canvas绘制的小人效果


Posted in Javascript onJanuary 27, 2016

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
常用参考资料(手册)下载或者链接
Jul 22 Javascript
滚动经典最新话题[prototype框架]下编写
Oct 03 Javascript
用Jquery实现多级下拉框无刷新的联动
Dec 22 Javascript
浅析JavaScript中的delete运算符
Nov 30 Javascript
js与运算符和或运算符的妙用
Feb 14 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
Jun 23 Javascript
简介JavaScript中的unshift()方法的使用
Jun 09 Javascript
如何理解Vue的.sync修饰符的使用
Aug 17 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
Nov 01 Javascript
JavaScript中的事件与异常捕获详析
Feb 24 Javascript
Vue.extend实现挂载到实例上的方法
May 01 Javascript
关于vue中如何监听数组变化
Apr 28 Vue.js
jquery ajax分页插件的简单实现
Jan 27 #Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
Jan 27 #Javascript
APP中javascript+css3实现下拉刷新效果
Jan 27 #Javascript
jQuery EasyUi实战教程之布局篇
Jan 26 #Javascript
jQuery Easyui实现左右布局
Jan 26 #Javascript
AngualrJS中的Directive制作一个菜单
Jan 26 #Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 #Javascript
You might like
BBS(php &amp; mysql)完整版(三)
2006/10/09 PHP
安装APACHE
2007/01/15 PHP
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
php绘制一条弧线的方法
2015/01/24 PHP
php计算年龄精准到年月日
2015/11/17 PHP
PHPExcel实现的读取多工作表操作示例
2020/04/14 PHP
IE/FireFox具备兼容性的拖动代码
2007/08/13 Javascript
js防止DIV布局滚动时闪动的解决方法
2014/10/30 Javascript
jQuery实现单击和鼠标感应事件
2015/02/01 Javascript
原生javascript实现匀速运动动画效果
2016/02/26 Javascript
Vue axios 中提交表单数据(含上传文件)
2017/07/06 Javascript
一个简易的js图片轮播效果
2017/07/22 Javascript
微信小程序实现表单校验功能
2020/03/30 Javascript
js获取html页面代码中图片地址的实现代码
2018/03/05 Javascript
详解SPA中前端路由基本原理与实现方式
2018/09/12 Javascript
记一次vue-webpack项目优化实践详解
2019/02/17 Javascript
python实现网站的模拟登录
2016/01/04 Python
对python:threading.Thread类的使用方法详解
2019/01/31 Python
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
python按比例随机切分数据的实现
2019/07/11 Python
如何基于python生成list的所有的子集
2019/11/11 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
Python .py生成.pyd文件并打包.exe 的注意事项说明
2021/03/04 Python
Loreto Gallo英国:欧洲领先的在线药房
2021/01/21 全球购物
最新自我评价范文
2013/11/16 职场文书
应届毕业生应聘自荐信
2013/12/07 职场文书
成功的餐厅经营创业计划书
2014/01/15 职场文书
生日寿宴答谢词
2014/01/19 职场文书
2014年大学庆元旦迎新年活动方案
2014/03/09 职场文书
行政专员的岗位职责
2014/03/10 职场文书
预防传染病方案
2014/06/14 职场文书
努力学习保证书
2015/02/26 职场文书
2016年六一儿童节开幕词
2016/03/04 职场文书
暑假开始了,你的暑假学习计划写好了吗?
2019/07/04 职场文书
2019年新郎保证书3篇
2019/10/17 职场文书
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript