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 相关文章推荐
疯掉了,尽然有js写的操作系统
Apr 23 Javascript
比较详细的关于javascript中void(0)的具体含义解释
Aug 02 Javascript
javascript动画算法实例分析
Jul 31 Javascript
学习JavaScript设计模式(多态)
Nov 25 Javascript
基于d3.js实现实时刷新的折线图
Aug 03 Javascript
Vue.js中数组变动的检测详解
Oct 12 Javascript
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
探索webpack模块及webpack3新特性
Sep 18 Javascript
JS插件clipboard.js实现一键复制粘贴功能
Dec 04 Javascript
vue 自定义提示框(Toast)组件的实现代码
Aug 17 Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 Javascript
uni-app实现点赞评论功能
Nov 25 Javascript
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字符过滤函数去除字符串最后一个逗号(rtrim)
2013/03/26 PHP
PHP统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
Yii获取当前url和域名的方法
2015/06/08 PHP
PHP根据session与cookie用户登录状态操作类的代码
2016/05/13 PHP
TP3.2框架分页相关实现方法分析
2020/06/03 PHP
PHP7修改的函数
2021/03/09 PHP
JQuery 前台切换网站的样式实现
2009/06/22 Javascript
jquery 简单导航实现代码
2009/09/11 Javascript
XmlUtils JS操作XML工具类
2009/10/01 Javascript
JavaScript类属性的访问方式详解
2014/02/11 Javascript
jquery validate 自定义验证方法介绍 日期验证
2014/02/27 Javascript
js实现同一页面多个不同运动效果的方法
2015/04/10 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
2016/08/11 Javascript
详解vue2.0脚手架的webpack 配置文件分析
2017/05/27 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
原生JS控制多个滚动条同步跟随滚动效果
2017/12/22 Javascript
使用post方法实现json往返传输数据的方法
2019/03/30 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
2019/08/28 Javascript
vue中的 $slot 获取插槽的节点实例
2019/11/12 Javascript
JavaScript 绘制饼图的示例
2021/02/19 Javascript
在Django的URLconf中进行函数导入的方法
2015/07/18 Python
python中Matplotlib实现绘制3D图的示例代码
2017/09/04 Python
python 使用装饰器并记录log的示例代码
2019/07/12 Python
python 模拟银行转账功能过程详解
2019/08/06 Python
python 判断txt每行内容中是否包含子串并重新写入保存的实例
2020/03/12 Python
Python如何输出整数
2020/06/07 Python
python小白学习包管理器pip安装
2020/06/09 Python
Python QT组件库qtwidgets的使用
2020/11/02 Python
Pandas DataFrame求差集的示例代码
2020/12/13 Python
SmartBuyGlasses丹麦:网上购买名牌太阳镜、眼镜和隐形眼镜
2016/10/01 全球购物
IRO美国官网:法国服装品牌
2018/03/06 全球购物
Yahoo-PHP面试题2
2014/12/06 面试题
Servlet的实例是在生命周期什么时候创建的?配置servlet最重要的是什么?
2012/05/30 面试题
金融专业毕业生自荐信
2014/06/26 职场文书
党员反对四风思想汇报范文
2014/10/25 职场文书
企业投资意向书
2015/05/09 职场文书