JavaScript+html5canvas绘制小人的效果介绍

2020-11-27 来源：筏尚旅游网

这篇文章主要介绍了JavaScript+html5 canvas绘制的小人效果,涉及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+html5canvas绘制小人的效果介绍