js html 卡通 学生,JavaScript+html5 canvas绘制的小人效果
本文实例讲述了JavaScript+html5 canvas绘制的小人效果。分享给大家供大家参考,具体如下:
运行效果截图如下:
index.html代码如下:
canvas中的缩放
#canvas {
background:black; margin-top:100px; margin-left:200px;
}
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);
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程序设计有所帮助。
js html 卡通 学生,JavaScript+html5 canvas绘制的小人效果相关推荐
- html小人动画效果代码,JavaScript+html5 canvas绘制的小人效果
本文实例讲述了JavaScript+html5 canvas绘制的小人效果.分享给大家供大家参考,具体如下: 运行效果截图如下: index.html代码如下: canvas中的缩放 #canvas ...
- html弧形列表效果,JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
本文实例讲述了JavaScript+html5 canvas绘制的圆弧荡秋千效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: demo #canvas { margin:50 ...
- html5时间画布走动,javascript+HTML5 canvas绘制时钟功能示例
本文实例讲述了javascript+HTML5 canvas绘制时钟功能.分享给大家供大家参考,具体如下: 效果如下: 代码: www.jb51.net canvas绘制时钟 div{text-ali ...
- html5canvas绘制时钟,JavaScript html5 canvas绘制时钟效果
本文实例讲述了JavaScript+html5 canvas绘制时钟效果.分享给大家供大家参考,具体如下: HTML部分: canvas绘图 JavaScript部分: function init() ...
- 放射性渐变色html,html5 canvas绘制放射性渐变色效果
效果图展示: canvas有些地方还是有点坑的,比如fillRect是方法不是属性,如果写成fillRect=这样是没效果的,而且还不报错.... 这里用到了createRadialGradient这 ...
- html 圆圈透明 其他不透明,Javascript HTML5 Canvas绘制透明圆圈
我需要有一个函数在画布上绘制几个圆圈,从mousedown at center = x,y开始,并将鼠标拖动到deltaX,deltaY,从而为每个圆圈创建半径r.圆圈无法填充(需要它们透明),因此用 ...
- html玫瑰花效果代码,HTML5 canvas绘制的玫瑰花效果
有人用html就写了一朵漂亮的玫瑰,是不是有点太骚气了.纯javascipt就弄出了玫瑰花,再次显示了HTML5的威力 警告:传说IE6内核是无法看到的,建议用Chrome或者Firefox. 玫瑰花 ...
- html玫瑰花,HTML5 canvas绘制的玫瑰花效果
有人用html就写了一朵漂亮的玫瑰,是不是有点太骚气了.纯javascipt就弄出了玫瑰花,再次显示了html5的威力 警告:传说ie6内核是无法看到的,建议用chrome或者firefox. 玫瑰花 ...
- php打印玫瑰花,HTML_HTML5 canvas绘制的玫瑰花效果,有人用html就写了一朵漂亮的玫 - phpStudy...
HTML5 canvas绘制的玫瑰花效果 有人用html就写了一朵漂亮的玫瑰,是不是有点太骚气了.纯javascipt就弄出了玫瑰花,再次显示了HTML5的威力 警告:传说IE6内核是无法看到的,建议 ...
最新文章
- 日韩决裂,半导体谁最受伤?
- Unity3d Http Get请求
- java基础之抽象类和接口
- yum安装ruby_centos 6.5 ruby环境安装
- 西瓜书+实战+吴恩达机器学习(一)机器学习基础(数据集划分、分类回归评估指标)
- Python程序设计语言基础05:函数和代码复用
- mybatis Example常用方法
- raft算法 java_raft-java首页、文档和下载 - 分布式一致性算法 Raft 的 Java 实现 - OSCHINA - 中文开源技术交流社区...
- Oracle 查询重复字段
- html各类表格制作,HTML:复杂表格制作
- Windows 操作系统
- 樊登读书会终身成长读后感_《终身成长》读书笔记
- 性价比降噪蓝牙耳机推荐,学生党值得入手的降噪蓝牙耳机分享
- starday跨境电商平台发展迅猛,主打高性价比的产品优势来了!
- 将系统必备组件打包进安装文件(以vs15打包.net formwork 4.5为例)有点鸡肋
- 基于水平集的图像分割方法
- A. Liserious战队
- 轮椅的两轮差速转向控制策略(智能轮椅)
- java Flie类
- 数学建模 层次分析法 python计算权重