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 相关文章推荐
JavaScript Event学习第四章 传统的事件注册模型
Feb 07 Javascript
使用Jquery打造最佳用户体验的登录页面的实现代码
Jul 08 Javascript
jQuery插件实现静态HTML验证码校验
Nov 06 Javascript
jQuery 选择同时包含两个class的元素的实现方法
Jun 01 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
Jun 21 Javascript
jQuery弹出遮罩层效果完整示例
Sep 13 Javascript
canvas实现流星雨的背景效果
Jan 13 Javascript
基于构造函数的五种继承方法小结
Jul 27 Javascript
node实现爬虫的几种简易方式
Aug 22 Javascript
vue把输入框的内容添加到页面的实例讲解
Nov 11 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
Apr 14 Javascript
vue常用高阶函数及综合实例
Feb 25 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
用PHP和ACCESS写聊天室(五)
2006/10/09 PHP
PHP代码优化的53个细节
2014/03/03 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
php简单实现短网址(短链)还原的方法(测试可用)
2016/05/09 PHP
[原创]php简单防盗链验证实现方法
2016/07/09 PHP
php测试kafka项目示例
2020/02/06 PHP
jquery tools之tooltip
2009/07/25 Javascript
复选框全选与全不选操作实现思路
2013/08/18 Javascript
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
2014/09/26 NodeJs
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
2016/07/05 Javascript
js实现字符全排列算法的简单方法
2017/05/01 Javascript
JavaScript队列函数和异步执行详解
2017/06/19 Javascript
jQuery实现全选、反选和不选功能
2017/08/16 jQuery
vue 项目如何引入微信sdk接口的方法
2017/12/18 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
vue输入节流,避免实时请求接口的实例代码
2019/10/30 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
2019/12/12 Javascript
[00:35]DOTA2上海特级锦标赛 MVP.Phx战队宣传片
2016/03/04 DOTA
[05:59]2018DOTA2国际邀请赛寻真——只为胜利的Secret
2018/08/13 DOTA
Python中文分词工具之结巴分词用法实例总结【经典案例】
2017/04/15 Python
Python 类的特殊成员解析
2018/06/20 Python
ZABBIX3.2使用python脚本实现监控报表的方法
2019/07/02 Python
pytorch 模型可视化的例子
2019/08/17 Python
使用python turtle画高达
2020/01/19 Python
解决TensorFlow GPU版出现OOM错误的问题
2020/02/03 Python
Pycharm修改python路径过程图解
2020/05/22 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
详解vscode实现远程linux服务器上Python开发
2020/11/10 Python
全网最细 Python 格式化输出用法讲解(推荐)
2021/01/18 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
使用HTML5技术开发一个属于自己的超酷颜色选择器
2013/09/22 HTML / CSS
html5 canvas实现圆形时钟代码分享
2013/12/25 HTML / CSS
C/C++程序员常见面试题二
2015/11/19 面试题
接口可以包含哪些成员
2012/09/30 面试题
教师党员思想汇报
2014/01/06 职场文书
浅谈Python基础之列表那些事儿
2021/05/11 Python