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技术(超文本扩展语言,可以自定义标签或属 ...
随机推荐
- JAVA经典算法40题（1-20）
[程序1] 题目:古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第四个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少? 1.程序分析: 兔子的规律 ...
- 模板 BFS
[模板]BFS #include <stdio.h> #include <string.h> #include <queue> using namespace st ...
- transform原点
Safari 4 Firefox3.5 Opera10.5 Chrome Internet Explorer 目前这两个属性得到了除去ie以外各个主流浏览器webkit,firefox,opera的支 ...
- WPF:设置MenuItem多种不同状态图标
需求描述: 给MenuItem内部的子Image设置默认图标(鼠标leave).鼠标hover图标.和选中时的图标. 注:是给Menu内个别MenuItem修改,并且是弹出子菜单. 问题描述: 1)前 ...
- ajax 代码
function ajax(){ var aj=null; if(window.ActiveXObject){ aj = new ActiveXObject("Microsoft.XMLHT ...
- noi 9265 取数游戏
题目链接:http://noi.openjudge.cn/ch0206/9265/ 题意:从自然数1到N中不取相邻2数地取走任意个数,问方案数. 解法:f[i][1]表示在前i个数中选了第i个的方案数 ...
- Annotation
Annotation是给类,方法或域上加的一种特殊的标记,可以通过反射取到注解的类型和值,从而完成某种特定的操作. 定义注解需要使用元注解,元注解有@Retention和@Target p.p1 { ...
- Windows下Eclipse连接hadoop
2015-3-27 参考: http://www.cnblogs.com/baixl/p/4154429.html http://blog.csdn.net/u010911997/article/de ...
- Duilib实现QQ聊天窗口晃动
转载:http://blog.csdn.net/arbboter/article/details/26282717 转载:http://blog.csdn.net/zerolusta/article/ ...
- 1074, "Column length too big for column 'err_solution' (max = 21845); use BLOB or TEXT instead"
一个注意点,就是sqlalchemy 使用create_all()建表的时候,要在 create_all()所在页面import那些表的model sqlalchemy.exc.Operational ...