canvas内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
canvas{
border:solid;
width:1000px;
height:600px
}
</style>
</head>
<body>
<canvas id="canvas1" width="1000px" height="600px"></canvas>
<button id="destroy">Destroy</button>
<button id="protect">Protect</button>
<!--<button id="a0">A0</button>
<button id="a1">A1</button>
<button id="a2">A2</button>-->
<canvas id="canvas2" width="2000px" height="1200px"></canvas> <script>
(function init(){
this.canvas=document.getElementById("canvas1");
this.context=canvas1.getContext("2d");
context.beginPath();
this.canvas2=document.getElementById("canvas2");
this.context2=canvas2.getContext("2d");
context2.beginPath();
document.getElementById("destroy").addEventListener("click",function(){
alert("Everything stopped");
},false);
})(); (function(){ /*
*回顾canvas画图基本方法
*/
/*(function(){
//context.fillRect(20,20,80,80); /!*context.moveTo(20,20);
context.lineTo(80,20);*!/ /!*context.moveTo(20,200);
context.lineTo(80,200);
context.lineTo(50,60);
context.closePath();
context.fill();*!/ /!*context.arc(300,300,40,0,Math.PI,false);
context.stroke();
context.arc(600,300,40,0,2*Math.PI,false);
context.fill();*!/ /!*context.moveTo(20,20);
context.lineTo(80,20);
context.stroke();
//context.moveTo(340,300);
context.arc(300,300,40,0,Math.PI,false);
context.stroke();*!/ /!*context.moveTo(20,200);
context.lineTo(80,200);
context.lineTo(50,60);
context.closePath();
context.fill();
//context.beginPath();
context.fillStyle="red";
context.moveTo(320,200);
context.lineTo(380,200);
context.lineTo(350,60);
context.closePath();
setTimeout(function(){
context.fill();
},800);*!/
})();*/ /*
* 理解闭包和立即执行函数
* 立即执行函数可以保护作用域，常用于代码封装
* 闭包用法较广，典型的就是保持引用（或隔绝引用，例如私有变量）
*/
/*(function(){
//IIFE
//函数声明不可调用，函数声明会产生声明提升
//函数表达式可直接调用，可以是匿名函数也可以是内联函数，声明不会提升
/!*(function(){
alert("abcd");
})();
+function(){
alert("efg");
}();*!/
//IIFE引起的问题
/!*var test=function(a){
console.log(a);
return function(c){
console.log(c);
}
}(function(b){
console.log(b);
})(1); //此处IIFE导致test被重写：test=(function(b){console.log(b)}(1);
console.log(test);*!/ //闭包
var button=[document.getElementById("a0"),document.getElementById("a1"),document.getElementById("a2")];
for(var i=0;i<3;i++){
//问题写法
/!*button[i].onclick=function(){
alert(i);
}*!/
//用闭包保持引用
/!*(function(j){
button[j].onclick=function(){
alert(j);
}
})(i);*!/
//高级语法
//eval("a"+i+".onclick=function(){alert("+i+")};");
}
//简写
/!*for(var i=0;i<3;i++)(function(j){
button[j].onclick=function(){
alert(j);
}
})(i);*!/
})();*/ var arr=[];
for(var i=0;i<100;i++){
arr.push(i);
} //顺序执行下线条是接近均匀的画出
/*(function(){
function synchronized(n){
var x=0;
var start=new Date().getTime();
for(var i=0;i<n;i++){
if(i%2==0){
context.moveTo((new Date().getTime())-start,20);
}else{
context.moveTo((new Date().getTime())-start,40);
}
for(var j=0;j<1000000;j++){
arr.reverse();
}
if(i%2==0){
context.lineTo((new Date().getTime())-start,20);
}else{
context.lineTo((new Date().getTime())-start,40);
}
context.stroke();
}
}
synchronized(10);
})();*/ /*
* 为什么setTimeout优于setInterval:如果执行一个setInterval的时间本身
* 就比间隔时间长，setInterval就会变成顺序执行，定时器的意义就没有了。
*/
/*(function(){
function compare(){
var tickTime=5;
var t1=0,t2=0;
var start=new Date().getTime();
setTimeout(function timer(){
if(++t1==3){
return;
}
context.moveTo((new Date().getTime())-start,20);
for(var j=0;j<200000;j++){
arr.reverse();
}
context.lineTo((new Date().getTime())-start,20);
context.stroke();
setTimeout(timer,tickTime);
},tickTime); var start2=new Date().getTime();
var id=setInterval(function timer(){
if(++t2==3){
clearInterval(id);
}
context.moveTo((new Date().getTime())-start2,40);
for(var j=0;j<200000;j++){
arr.reverse();
}
context.lineTo((new Date().getTime())-start2,40);
context.stroke();
},tickTime);
}
compare();
})();*/ /*
* 顺序执行和定时器同时发生，只有一条线程
*/
/*(function(){
var start=new Date().getTime();
function asynchronized(n){
var tickTime=5;
var t=0;
setTimeout(function timer(){
if(t==n){
return;
}
if(t%2==0){
context.moveTo((new Date().getTime())-start,60);
}else{
context.moveTo((new Date().getTime())-start,80);
}
for(var j=0;j<200000;j++){
arr.reverse();
}
if(t%2==0){
context.lineTo((new Date().getTime())-start,60);
}else{
context.lineTo((new Date().getTime())-start,80);
}
context.stroke();
t++;
setTimeout(timer,tickTime);
},tickTime);
}
function synchronized(n){
var x=0;
for(var i=0;i<n;i++){
if(i%2==0){
context.moveTo((new Date().getTime())-start,20);
}else{
context.moveTo((new Date().getTime())-start,40);
}
for(var j=0;j<1000000;j++){
arr.reverse();
}
if(i%2==0){
context.lineTo((new Date().getTime())-start,20);
}else{
context.lineTo((new Date().getTime())-start,40);
}
context.stroke();
}
}
asynchronized(4);
//synchronized(4);
setTimeout(function(){
synchronized(4);
},10);
})();*/ //任何交互事件都会阻塞定时器
/*(function(){
var x=0,y=0;
context.moveTo(x,y);
setTimeout(function next(){
if(y>=canvas.height-20){
return;
}
x+=3,y+=3;
context.lineTo(x,y);
context.stroke();
setTimeout(next,17);
},17);
})();*/ //如何通过定时器来形成一个完美的动画
/*(function(){
context.fillRect(20,20,80,300);
context.moveTo(20,320);
context.lineTo(600,320);
context.stroke(); var h=300,
totalTime=2000,
tickTime=60,
//tickTime=1,
//tickTime=17,
animateTimes=totalTime/tickTime,
stepH=h/animateTimes,
tempY=0,
position=0;
//第一种错误做法，以时间为基准进行演进
/!*var start=new Date().getTime();
setTimeout(function next(){
var end=new Date().getTime();
if(end-start>=totalTime){
console.log(end-start);
return;
}
context.fillRect(200,20,80,h*(end-start)/totalTime);
/!*if(end-start>=totalTime){
return;
}*!/
setTimeout(next,tickTime);
},tickTime);*!/
//第二种错误写法，坐标偏移
/!*setTimeout(function next(){
if(tempY>=h){
return;
}
context.fillRect(200,20,80,tempY);
tempY+=stepH;
setTimeout(next,tickTime);
},tickTime);*!/
//一种合理的做法
/!*setTimeout(function next(){
if(position>=animateTimes-1){
context.fillRect(200,20,80,h);
return;
}
context.fillRect(200,20,80,tempY);
tempY+=stepH;
position++;
setTimeout(next,tickTime);
},tickTime);*!/
})();*/ /*
* 性能测试，通常认为1毫秒可执行一百万次原子操作。
*/
/*(function(){
var start=new Date().getTime();
for(var i=0;i<1000000;i++){
var a=1+2;
}
console.log(new Date().getTime()-start);
})();*/ //小游戏
/*(function game(){
var startX,startY,startTime,endX,endY,endTime;
var stepX=2,stepY,tickTime=40,id;
canvas.addEventListener("mousedown",doMouseDown,false);
canvas.addEventListener('mouseup', doMouseUp, false); function doMouseDown(e){
clearTimeout(id);
context.clearRect(0,0,canvas.width,canvas.height);
startX= e.pageX;
startY= e.pageY;
stepX=2;
startTime=new Date().getTime();
} function doMouseUp(e){
endX= e.pageX;
endY= e.pageY;
endTime=new Date().getTime();
stepY=stepX*(endY-startY)/(endX-startX);
tickTime/=(endTime-startTime)/100;
startFlow();
} function startFlow(){
id=setTimeout(function next(){
context.clearRect(0,0,canvas.width,canvas.height);
context.fillRect(endX,endY,20,20);
if(endX>=980){
stepX*=-1;
}else if(endX<=0){
stepX*=-1;
}
if(endY>=580){
stepY*=-1;
}else if(endY<=0){
stepY*=-1;
}
endX+=stepX;
endY+=stepY;
id=setTimeout(next,tickTime);
},tickTime);
}
})();*/ /*
* 保护动画，最简单的AOP
* CSS动画不受影响，是另一个线程
*/
/*(function(){
var h=300,totalTime=2000,tickTime=17,animateTimes=totalTime/tickTime,stepH=h/animateTimes,tempY= 0,id;
function cancelAnimate(){
if(id){
clearTimeout(id);
}
context.clearRect(0,0,canvas.width,canvas.height);
context.fillRect(200,20,80,300);
} id=setTimeout(function next(){
if(tempY>=h){
return;
}
context.fillRect(200,20,80,tempY);
tempY+=stepH;
id=setTimeout(next,tickTime);
},tickTime); document.getElementById("protect").addEventListener("click",function(){
cancelAnimate();
alert("Animate protected");
},false);
})();*/ /*
* 每次都要清除页面所有的定时器？每次都要考虑页面定时器之间的互相影响？针对每个定时器id都要专写一个变量和方法？
* 中央定时器和高级AOP方法封装
*/
/*(function(){
//中央定时器，并非必须使用
var centerTimer={
tickTime:25,
timerID:0,
timerFn:[],
isAnimate:false, add:function(aFn,cFn){
aFn.cancelFn=cFn;
this.timerFn.push(aFn);
},
start:function(){
if(this.timerID) return;
this.isAnimate=true;
(function runNext(){
if(centerTimer.timerFn.length>0){
for(var i=0;i<centerTimer.timerFn.length;i++){
//作为数组的一部分调用方法时this指向方法本身
if(centerTimer.timerFn[i](centerTimer.tickTime)===false){
centerTimer.timerFn.splice(i,1);
i--;
//console.log(new Date().getTime()-start);
}
}
centerTimer.timerID=setTimeout(runNext,centerTimer.tickTime);
}
})();
},
stop:function(){
this.isAnimate=false;
clearTimeout(this.timerID);
this.timerID=0;
for(var i in this.timerFn){
if(this.timerFn[i].cancelFn){
this.timerFn[i].cancelFn();
}
}
this.timerFn=[];
}
};
//AOP包装方法
var AOP={
before:function(){
if(centerTimer.isAnimate){
centerTimer.stop();
}
},
after:function(){
console.log("do something after function");
},
bind:function(elem,type,fn,useCapture){
var that=this;
elem.addEventListener(type,function(){
//that保存aop对象
//this为DOM节点
that.before.apply(this,arguments);
fn.apply(this,arguments);
that.after.apply(this,arguments);
},useCapture);
}
}; //还是那个长方形的例子，对于不同的情况返回true和false
var h=300,totalTime=2000,tickTime=17,animateTimes=totalTime/tickTime,stepH=h/animateTimes,tempY= 0,id;
function cancelAnimate(){
context.clearRect(0,0,canvas.width,canvas.height);
context.fillRect(200,20,80,300);
}
function animate(){
if(tempY>=h){
return false;
}
context.fillRect(200,20,80,tempY);
tempY+=stepH;
return true;
} centerTimer.add(animate,cancelAnimate);
AOP.bind(document.getElementById("protect"),"click",function(){
alert("AOP function");
},false); centerTimer.start(); })();*/ /*
* 再谈screenPixel
*/
/*(function(){
//为什么要在手机上缩放,例子无效
//无缩放
/!*(function(){
context.fillStyle="#fa5d5d";
context.moveTo(20,440);
context.lineTo(400,440);
context.lineTo(210,20);
context.closePath();
context.fill(); context.fillStyle="#4a90e2";
context.fillRect(480,20,360,400); context.fillStyle="#888";
context.font=56+"px Arial";
context.textAlign="center";
context.textBaseline="middle";
context.fillText("计算机科学ab",210,500);
context.fillText("数据结构与算法12",620,500);
})();
//缩放后
(function(){
context2.fillStyle="#fa5d5d";
context2.moveTo(40,880);
context2.lineTo(800,880);
context2.lineTo(420,40);
context2.closePath();
context2.fill(); context2.fillStyle="#4a90e2";
context2.fillRect(960,40,720,800); context2.fillStyle="#888";
context2.font=112+"px Arial";
context2.textAlign="center";
context2.textBaseline="middle";
context2.fillText("计算机科学ab",420,1000);
context2.fillText("数据结构与算法12",1240,1000);
})();*!/ /!*(function(){
context.moveTo(20,40);
context.lineTo(320,40);
//context.stroke(); context.moveTo(20,100.3);
context.lineTo(320,100.3);
context.moveTo(330,100);
context.lineTo(500,100);
//context.stroke(); context.moveTo(20,160.666);
context.lineTo(320,160.666);
context.moveTo(330,161);
context.lineTo(500,161);
//context.stroke(); context.fillStyle="#000";
context.font=24+"px Arial";
context.textAlign="left";
context.textBaseline="bottom";
/!*context.fillText("x:20,y:40",20,38);
context.fillText("x:20,y:100.3",20,98);
context.fillText("x:20,y:160.666",20,158);
context.fillText("x:330,y:100",330,98);
context.fillText("x:330,y:161",330,158);*!/ //一种解决方案
/!*x=20;
y=266.777;
y=Math.round(y);
y=y%2==0 ? y:y+1;
context.moveTo(x,y);
context.lineTo(x+200,y);*!/
context.stroke();
})();*!/ })();*/ })(); </script>
</body>
</html>
canvas内容的更多相关文章
- html2canvas脚本实现将html内容转换canvas内容
在开始使用html2canvas之前,有一些关于html2canvas及其一些限制的好处. 介绍 该脚本允许您直接在用户浏览器上截取网页或部分网页的“屏幕截图”.屏幕截图基于DOM,因此它可能不是真实 ...
- 用JavaScript将Canvas内容转化成图片的方法
上周我们花了半天时间开发下一个准备放进Mozilla Marketplace的应用.有一个应用现在非常的火热,那就是Instagram,Facebook花了100万美元收购了它.我们也想有100万美元 ...
- 微信小程序 canvas 内容（宽高） 兼容不同机型
此功能并没有做所有机型测试,后面会一个一个做一下,如需使用请先自作测试! canvas在小程序中设定的尺寸默认是px 并不是rpx的 所以需要转换一下 PS:设计稿是750像素 wx.getSyste ...
- HTML5 程序设计 - 使用HTML5 Canvas API
请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...
- javascript的canvas绘图的基本用法
<canvas>是HTML里面非常强大的元素,利用它结合js可以实现很多动画效果,大大增强交互性.下面,我想用图文并茂的方式阐述一下canvas的绘图机制的基础内容,话不多说,先上代码: ...
- Canvas绘制渐变
1.绘制线性渐变 Canvas提供了用于创建线性渐变的函数createLinearGradient(x0,y0,x1,y1),坐标点(x0,y0)是起点 ,(x1,y1)是终点 创建一个渐变色 var ...
- 使用Canvas绘制背景图
原文 http://www.imququ.com/post/use-canvas-as-background-image.html 最近iCloud Web的Beta版换了UI,整体风格变得和iOS ...
- html5 canvas 笔记五（合成与裁剪）
组合 Compositing globalCompositeOperation syntax: globalCompositeOperation = type 注意:下面所有例子中,蓝色方块是先绘制的 ...
- HTML5 canvas globalCompositeOperation绘图类型讲解
我们总是将一个图形画在另一个之上,大多数情况下,这样是不够的.比如说,它这样受制于图形的绘制顺序.不过,我们可以利用 globalCompositeOperation 属性来改变这些做法.global ...
随机推荐
- 关于C语言的一些trick
很多东西已经记不起来了,想到一点写一点,碰到一点写一点,慢慢累积. 关于# #在宏定义中用于替换传入变量的字符,例如: #define whole_operation(n) do { printf( ...
- kbengine里如何使用git快速下载项目?
项目有两个镜像,github[https://github.com/kbengine/kbengine.git] ,osc开源中国[https://git.oschina.net/likecg/kbe ...
- Qt开发中的实用笔记二--中文转码问题和string转换问题：
一,中文乱码转码问题 1,转码三句话:window下默认是GBK格式,linux下默认是UTF-8,看情况转换UTF-8/GBK QTextCodec::setCodecForTr(QTextCode ...
- .net framework 3.5 序列化
1.JSON序列化. 首先,引用程序集 System.Runtime.Serialization, 我们要使用System.Runtime.Serialization.Json,默认点不出来,这应该是 ...
- Winform水印
本文实例展示了WinForm实现为TextBox设置水印文字功能,非常实用的技巧,分享给大家供大家参考. 关键代码如下 using System; using System.Runtime.Inter ...
- 如何对web.config进行加密和解密
http://blog.csdn.net/jf_jifei/article/details/6527390 在WEB网站开发过程中,如果我们将数据库连接字符串封装到.DLL文件中,将会给数据库和程序的 ...
- 【转】excel 末尾是0 恢复数据方法
今天从数据库里面查了点数据,用plsql导出为csv数据后用excel打开后就出问题了,显示的问题,excel中会遇到一列中因为数字太长,结果变成了用科学计数法来表示,而这种损失不可逆的,及时改变其格 ...
- Mysql与Oracle区别
1.Oracle是大型数据库而Mysql是中小型数据库,Oracle市场占有率达40%,Mysql只有20%左右,同时Mysql是开源的而Oracle价格非常高. 2.Oracle支持大并发,大访问量 ...
- android 开发学习笔记 （一）
每个app 都有一个自己的 linux 进程: 每个进程都在自己的虚拟机里执行 两个app 可以跑在一个进程,一个vm里 android app 四大组件:activity,content provi ...
- Hessian最佳实践
前言:本文主要介绍‘独立的Hessian技术’与‘结合Spring技术’的两种Hessian接口开发模式及代码示例. 一.独立的Hessian技术开发步骤 Hessian-Java服务器端必须具备以下 ...