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中的eval函数
Nov 02 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
Aug 21 Javascript
js禁止页面使用右键(简单示例代码)
Nov 13 Javascript
JavaScript框架(iframe)操作总结
Apr 16 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
Apr 16 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
Jan 28 Javascript
js导出excel文件的简洁方法(推荐)
Nov 02 Javascript
Vue生命周期示例详解
Apr 12 Javascript
Angular2.js实现表单验证详解
Jun 23 Javascript
highcharts 在angular中的使用示例代码
Sep 20 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
Jul 20 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
Nov 04 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安装为Apache DSO
2006/10/09 PHP
smarty高级特性之对象的使用方法
2015/12/25 PHP
thinkphp3.x连接mysql数据库的方法(具体操作步骤)
2016/05/19 PHP
PHP基于单例模式编写PDO类的方法
2016/09/13 PHP
PHP从数组中删除元素的四种方法实例
2017/05/12 PHP
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型
2012/02/27 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
2013/04/08 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
2013/06/17 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
被遗忘的javascript的slice() 方法
2015/04/20 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
第二篇Bootstrap起步
2016/06/21 Javascript
微信js-sdk界面操作接口用法示例
2016/10/12 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
js动态引入的四种方法
2018/05/05 Javascript
centos 上快速搭建ghost博客方法分享
2018/05/23 Javascript
基于axios 解决跨域cookie丢失的问题
2018/09/26 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
2019/11/12 Javascript
vue实现图片上传预览功能
2019/12/23 Javascript
Django在win10下的安装并创建工程
2017/11/20 Python
python购物车程序简单代码
2018/04/18 Python
python各类经纬度转换的实例代码
2019/08/08 Python
浅析PyTorch中nn.Module的使用
2019/08/18 Python
python返回数组的索引实例
2019/11/28 Python
基于python-pptx库中文文档及使用详解
2020/02/14 Python
pandas DataFrame 数据选取,修改,切片的实现
2020/04/24 Python
荷兰的时尚市场:To Be Dressed
2019/05/06 全球购物
定义一结构体变量,用其表示点坐标,并输入两点坐标,求两点之间的距离
2015/08/17 面试题
村委会贫困证明
2014/01/14 职场文书
五星级酒店餐饮部总监的标准岗位职责
2014/02/17 职场文书
人力资源部经理助理岗位职责
2014/03/04 职场文书
年度优秀员工获奖感言
2014/08/15 职场文书
新郎接新娘保证书
2015/05/08 职场文书
Python基础之数据类型知识汇总
2021/05/18 Python
Node-Red实现MySQL数据库连接的方法
2021/08/07 MySQL