Canvas 画布小案例
<script>
window.onload = function () {
draw('canvas1');
draw('canvas2');
draw('canvas3');
draw('canvas4');
draw('canvas5');
draw('canvas6');
draw('canvas7');
draw('canvas8');
draw('canvas9');
}; function draw(id) {
var canvas = document.getElementById(id);
if (canvas == null) {
return false;
}
var context = canvas.getContext('2d');
context.fillStyle = "#eeeeef";
context.fillRect(, , , );
//形状渐变
if (id == "canvas1") {
for (var i = ; i <= ; i++) {
context.beginPath();
context.arc(i * , i * , i * , , Math.PI * , true);
//一定要关闭路径
context.closePath();
context.fillStyle = "rgba(255,0,0,0.25)";
context.fill();
}
}
//莲花形
else if (id == "canvas2") {
var dx = ;
var dy = ;
var s = ;
context.beginPath();
context.fillStyle = "rgb(100,255,100)";
context.strokeStyle = "rgb(0,0,100)";
var x = Math.sin();
var y = Math.cos();
var dig = Math.PI / * ;
for (var i = ; i < ; i++) {
var x = Math.sin(i * dig);
var y = Math.cos(i * dig);
context.lineTo(dx + x * s, dy + y * s);
}
context.closePath();
context.fill();
context.stroke();
}
//贝塞尔曲线，从中心圆引出的线都是曲线
else if (id == "canvas3") {
var dx = ;
var dy = ;
var s = ;
context.beginPath();
context.fillStyle = "rgb(100,255,100)";
var x = Math.sin();
var y = Math.cos();
var dig = Math.PI / * ;
for (var i = ; i < ; i++) {
var x = Math.sin(i * dig);
var y = Math.cos(i * dig);
context.bezierCurveTo(dx + x * s, dy + y * s - , dx + x * s + , dy + y * s, dx + x * s, dy + y * s);
}
context.closePath();
context.fill();
context.stroke();
}
//颜色渐变
else if (id == "canvas4") {
var g1 = context.createLinearGradient(, , , );
g1.addColorStop(, "rgb(255,255,0)");
g1.addColorStop(, "rgb(0,255,255)");
context.fillStyle = g1;
context.fillRect(, , , );
var g2 = context.createLinearGradient(, , , );
g2.addColorStop(, "rgba(0,0,255,0.5)");
g2.addColorStop(, "rgba(255,0,0,0.5)");
for (var i = ; i < ; i++) {
context.beginPath();
context.fillStyle = g2;
context.arc(i * , i * , i * , , Math.PI * , true);
context.closePath();
context.fill();
}
}
//径向渐变
else if (id == "canvas5") {
var g1 = context.createRadialGradient(, , , , , );
g1.addColorStop(0.1, "rgb(255,255,0)");
g1.addColorStop(0.3, "rgb(255,0,255)");
g1.addColorStop(, "rgb(0,255,255)");
context.fillStyle = g1;
context.fillRect(, , , );
}
//变形
else if (id == "canvas6") {
var canvas = document.getElementById(id);
if (canvas == null) {
return false;
}
var context = canvas.getContext("2d");
context.fillStyle = "#eeeeef";
context.fillRect(, , , );
context.translate(, );
context.fillStyle = "rgba(255,0,0,0.25)";
for (var i = ; i < ; i++) {
context.translate(, );
context.scale(0.95, 0.95);
//旋转
context.rotate(Math.PI / );
context.fillRect(, , , );
}
}
//组合图形
else if (id == "canvas7") {
var oprtns = new Array(
"source-atop",//只绘制原有图层中被新图层所覆盖的部分与新图层的其他部分，原有图层中的其他部分变成透明
"source-in",//只显示重叠的部分，其他部分透明
"source-out",//只显示不重叠的部分，其他部分透明
"source-over",//表示新图层在原有图层之上
"destination-atop",
"destination-in",
"destination-out",
"destination-over",
"lighter",//原图层和新图层均绘制，重叠部分做加色处理
"copy",//只绘制新图层，原图层中未与新图层重叠的部分变成透明
"xor"//只绘制不重叠部分
);
i = ;
context.fillStyle = "blue";
context.fillRect(, , , );
context.globalCompositeOperation = oprtns[i];
context.beginPath();
context.fillStyle = "red";
context.arc(, , , Math.PI * , false);
context.fill();
}
//阴影图形
else if (id == "canvas8") {
context.fillStyle = "#eeeeef";
context.fillRect(, , , );
context.shadowOffsetX = ;
context.shadowOffsetY = ;
context.shadowColor = "rgba(100,100,100,0.5)";
context.shadowBlur = 3.5;
for (var i = ; i < ; i++) {
context.translate(, )
Create5Star(context);
context.fill();
}
}
//复制图片
else if (id == "canvas9") {
context.fillStyle = "#ffffff";
context.fillRect(, , , );
var image = new Image();
image.src = "/images/1.jpg";
image.onload = function () {
drawImage(context, image);
}
}
} //绘制图片
function drawImage(context, image) {
//从(0,0)开始绘制
//context.drawImage(image, 0, 0); //从(0,0)开始绘制，大小为200*200
context.drawImage(image, , , , ); //drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh)
//drawImage(img对象,原图被复制区域的起始坐标和宽高,复制区域在画布上的起始坐标和宽高)
context.drawImage(image, ,,,,,,,);
} //创建五角星
function Create5Star(context) {
var dx = ;
var dy = ;
var s = ;
context.beginPath();
context.fillStyle = "rgba(255,0,0,0.5)";
var x = Math.sin();
var y = Math.cos();
var dig = Math.PI / * ;
for (var i = ; i < ; i++) {
var x = Math.sin(i * dig);
var y = Math.cos(i * dig);
context.lineTo(dx + x * s, dy + y * s);
}
context.closePath();
}
</script>
以上是用Canvas的getContext("2d")方法实现的简单图形。
下面实现当鼠标点击和移动时流星雨效果，利用createjs中的Easeljs：
<script src="easeljs-0.8.1.min.js"></script>
<script>
var canvas;
var stage;
var sprite; window.onload = function () {
canvas = document.getElementById("canvas");
stage = new createjs.Stage(canvas); stage.addEventListener("stagemousedown", clickCanvas);
stage.addEventListener("stagemousemove", moveCanvas); var data = {
images: ["1.jpg"],
frames: { width: , height: , regX: , regY: }
}; sprite = new createjs.Sprite(new createjs.SpriteSheet(data));
createjs.Ticker.setFPS();
createjs.Ticker.addEventListener("tick", tick);
} function tick(e) {
var t = stage.getNumChildren();
for (var i = t-; i > ; i--) {
var s = stage.getChildAt(i);
debugger;
s.vY += ;
s.vX += ;
s.x += s.vX;
s.y += s.vY; s.scaleX = s.scaleY = s.scaleX + s.vS;
s.alpha += s.vA; if (s.alpha<=||s.y>canvas.height) {
stage.removeChildAt(i);
}
}
stage.update(e);
} //点击鼠标
function clickCanvas(e) {
debugger;
addS(Math.random() * + , stage.mouseX, stage.mouseY, );
} //移动鼠标
function moveCanvas(e) {
debugger;
addS(Math.random() * + , stage.mouseX, stage.mouseY, );
} function addS(count, x, y, speed) {
debugger;
for (var i = ; i < count; i++) {
var s = sprite.clone();
s.x = x;
s.y = y;
s.alpha = Math.random() * 0.5 + 0.5;
s.scaleX = s.scaleY = Math.random() + 0.3; var a = Math.PI * * Math.random();
var v = (Math.random() - 0.5) * * speed;
s.vX = Math.cos(a) * v;
s.vY = Math.sin(a) * v;
s.vS = (Math.random() - 0.5) * 0.2;//scale 缩放
s.vA = -Math.random()*0.05 - 0.01;//alpha 透明度
stage.addChild(s);
}
}
</script>
Createjs：http://createjs.com/
Canvas的API：https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D
Canvas 画布小案例的更多相关文章
- 微信小程序--canvas画布实现图片的编辑
技术:微信小程序 概述 上传图片,编辑图片大小,添加文字,改变文字颜色等 详细 代码下载:http://www.demodashi.com/demo/14789.html 概述 微信小程序--ca ...
- 微信小程序 在canvas画布上划动，页面禁止滑动
要实现微信小程序 在canvas画布上划动,页面禁止滑动,不仅要设置disable-scroll="true",还要要给canvas绑定一个触摸事件才能生效. <canvas ...
- [技术博客]海报图片生成——小程序canvas画布
目录 背景介绍 canvas简介 代码实现 难点讲解 圆角矩形裁剪失败之PS的妙用 编码不要过硬 对过长的文字进行截取 真机首次生成时字体不对 drawImage只能使用本地图片 背景介绍 目标:利用 ...
- 微信小程序_(组件)canvas画布
canvas画布效果 官方文档:传送门 Page({ canvasIdErrorCallback: function (e) { console.error(e.detail.errMsg) }, o ...
- 小程序开发-Canvas画布组件
Canvas画布 基本使用方法: 在wxml中添加canvas组件 <canvas canvas-id='canvasDemo' class='demo'></canvas> ...
- canvas实践小实例一 —— 画板工具
前面讲了一部分的canvasAPI的基础知识,光看API的介绍确实是很无趣乏味,需要一点可以激发内心的激情的东西来激励自己来学习,于是就了伴随canvasAPI学习的小实例,这样通过API的知识,结合 ...
- “canvas画布仿window系统自带画图软件"项目的思考
"canvas画布仿window系统自带画图软件"项目的思考 首先贴上DEMO图,并没有美化效果.对UI有要求的,请自带补脑技术. 思考一 在做项目的过程中,我发现"工具 ...
- 更新——Canvas画布动画效果之实现倒计时
Hello,大家好! 小W复活啦!继续欢乐的给大家更博,输送新知识~~ 不开玩笑啦!秒进正题~~~ 上次更博,小W给大家介绍了Canvas画布的基础部分,以及实现了一个由7*10点阵图显示的倒计时的基 ...
- CANVAS画布与SVG的区别
CANVAS是html5提供的新元素<canvas>,而svg存在的历史要比canvas久远,svg并不是html5专有的标签,最初svg是用xml技术(超文本扩展语言,可以自定义标签或属 ...
随机推荐
- jq选中问题
var objs = $("div[id^='offer_details_']"); //遍历点击事件监听问题 onclick="details("+offer ...
- VBA 操作 Excel 生成日期及星期
直接上代码~~ 1. 在一个 Excel 生成当月或当年指定月份的日期及星期 ' 获取星期的显示 Function disp(i As Integer) Select Case i disp = & ...
- UCenter整合登陆时出现’Authorization has expired’错误（2014-03-13记）
原因之可能是两台机子的时间不一致导致.
- jQuery 简单过滤选择器
<!DOCTYPE HTML> <html> <head> <title> 使用jQuery基本过滤选择器 </title> <scr ...
- asp.net 捕获throw
<script type="text/javascript"> function pageLoad() { Sys.WebForms.PageRequestManage ...
- 为什么要在html和body加上“height:100%;”
元素中有内容的时候div才能被撑起来所以我给div加了背景但是也不显示,就是因为没有内容,这个时候的解决办法就是 html,body{ height:100%; }
- 【宽度优先搜索】神奇的状态压缩 CodeVs1004四子连棋
一.写在前面 其实这是一道大水题,而且还出在了数据最水的OJ上,所以实际上这题并没有什么难度.博主写这篇blog主要是想写下一个想法--状态压缩.状态压缩在记录.修改状态以及判重去重等方面有着极高的( ...
- mac下 codeigniter在apache下去掉index.php
原文:http://blog.csdn.net/tutngfei1129287460/article/details/18359191 1.要修改Apache 的配置文件,让Apache支持rewri ...
- 特征创建：Reference Characteristic、Template
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- Linux信号基础
Linux信号基础 作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! Linux进程基础一文中已经提到,Linux以进程为单位来 ...