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>
时间： 2024-08-11 12:41:47

canvas内容的相关文章

用JavaScript将Canvas内容转化成图片的方法

上周我们花了半天时间开发下一个准备放进Mozilla Marketplace的应用.有一个应用现在非常的火热,那就是Instagram,Facebook花了100万美元收购了它.我们也想有100万美元装到口袋里,我决定开发一个Instagram风格的应用,这篇文章了我将介绍一下如何将一张图片拷贝到canvas里,以及反过来,如何将画布内容保存成图片格式. 使用JavaScript将图片拷贝进画布 要想将图片放入画布里,我们使用canvas元素的drawImage方法: // Converts i

HTML canvas原生js实现鼠标画图

效果展示: 查看效果可点击下载源文件 http://i.cnblogs.com/Files.aspx html完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh

用canvas模拟钟表

很久没有更新博客了,最近忙实习准备面试,快要心力交瘁-_-.空闲下来后,用HTML5的canvas模拟的简易钟表,贴上代码. 效果如下: <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>canvas模拟钟表</title> <style> bod

html5 canvas 笔记五（合成与裁剪）

组合 Compositing globalCompositeOperation syntax: globalCompositeOperation = type 注意:下面所有例子中,蓝色方块是先绘制的,即“已有的 canvas 内容”,红色圆形是后面绘制,即“新图形”. source-over 这是默认设置,新图形会覆盖在原有内容之上. destination-over 会在原有内容之下绘制新图形. source-in 新图形会仅仅出现与原有内容重叠的部分.其它区域都变成透明的. destina

canvas动画

在canvas中做动画是根据时间变化重新将canvas内容重新绘制,这样看起来就感觉是一个连贯的动画了.也就是一帧一帧的概念.每一帧的内容都是不一样的. 下面做一个齿轮从左到右滚动的动画.每隔一段时间重新绘制图片,然后移动图片的x轴,将图片旋转.这样就可以看出是滚动的.主要用到canvas的一个绘制图片的函数: drawImage(img,x,y,width,height),canvas坐标改变函数translate(x,y),canvas旋转函数,rotate(deg).代码如下: <!DOC

【HTML】Canvas(4)-进阶

canvas高级功能 放大与缩小:用scale函数来实现图形的放大和缩小          原型:scale(x,y);   x表示在x轴进行缩放,即水平缩放:y表示在y轴上进行缩放,即竖直方向缩放. 放大: var c=document.getElementById('mycanvas'); var ctx=c.getContext('2d'); //以(10,10)为坐标起点开始绘制一个长150,宽100的黑色矩形 ctx.beginPath(); ctx.strokeStyle='#000

HTML5 程序设计 - 使用HTML5 Canvas API

请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方便查看. 学习笔记,纯手工码字,有错别字什么的请指出,觉得好的请点个赞小小的支持下.谢谢亲们. 本篇,我们将探索如何使用HTML5和Canvas API.Canvas API很酷,可以通过它来动态生成和展示图形.图表.图像以及动画. 本篇将使用渲染API(Rendering API)的基本功能来创建

Android-清除Canvs内容的实现

SurfaceView背景透明: setZOrderOnTop(true);SurfaceHolder holder = this.getHolder(); holder.setFormat(PixelFormat.TRANSLUCENT); 清除Canvas内容的实现方式一: Canvas canvas = null; try { synchronized (holder) { canvas = holder.lockCanvas(null); if (canvas == null) { re

自定义控件三部曲之绘图篇（十三）——Canvas与图层(一)

前言:猛然知道姥姥79了,我好怕,好想哭 系列文章: Android自定义控件三部曲文章索引:http://blog.csdn.net/harvic880925/article/details/50995268 在给大家讲解了paint的几个方法之后,我觉得有必要插一篇有关Canvas画布的知识,在开始paint之前,我们讲解了canvas绘图的几篇文章和cavas的save().store()的知识,这篇是对Canvas的一个系统的补充,前几篇文章链接如下:<自定义控件之绘图篇(一):概述及基