用Javascript和canvas實現的塗鴉板,似乎不支持IE8及以下瀏覽器

<!doctype html>
<html>
<head>
 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
 <title>javascript canvas畫圖實例</title>
 <meta http-equiv="X-UA-Compatible" content="IE=7" />
 <meta name="keywords" content="" />
 <meta name="description" content="" />
 <style>
 *{margin:0;padding:0;}
 .fa{width:740px;margin:0 auto;}
 .top{margin:20px 0;}
 .top input{width:25px;height:25px;border:1px solid #fff;border-radius:4px;background:#ddd;}
 .top .i1{background:#000000;}
 .top .i2{background:#FF0000;}
 .top .i3{background:#80FF00;}
 .top .i4{background:#00FFFF;}
 .top .i5{background:#808080;}
 .top .i6{background:#FF8000;}
 .top .i7{background:#408080;}
 .top .i8{background:#8000FF;}
 .top .i9{background:#CCCC00;}
 #canvas{background:#eee;cursor:default;}
 .font input{font-size:14px;}
 .top .grea{background:#aaa;}
 </style>
</head>
<body>
<div class="fa">
    <div class="top">
        <div id="color">
            請選擇畫筆顏色:
            <input class="i1" type="button" value="" />
            <input class="i2" type="button" value="" />
            <input class="i3" type="button" value="" />
            <input class="i4" type="button" value="" />
            <input class="i5" type="button" value="" />
            <input class="i6" type="button" value="" />
            <input class="i7" type="button" value="" />
            <input class="i8" type="button" value="" />
            <input class="i9" type="button" value="" />
        </div>
        <div class="font" id="font">
            請選擇畫筆的寬度:
            <input type="button" value="細" />
            <input type="button" value="中" class="grea"/>
            <input type="button" value="粗" />
        </div>
        <div>
            <span id="error">如果有錯誤,請使用橡皮擦:</span>
            <input id="eraser" style="width:60px;font-size:14px;"type="button" value="橡皮擦" />
        </div>
  <input id="clear" type="button" value="清除畫布" style="width:80px;"/>
  <input id="revocation" type="button" value="撤銷" style="width:80px;"/>
  <input id="imgurl" type="button" value="導出圖片路徑" style="width:80px;"/>
    </div>
    <canvas id="canvas" width="740" height="420">您的瀏覽器不支持 canvas 標籤</canvas>
    <div id="div1"></div>
</div>
<div id="html">

</div>
<script>
(function(){
    var paint={
        init:function()
        {
            this.load();
            
        },
        load:function()
        {   
            this.x=[];//記錄鼠標移動是的X座標
            this.y=[];//記錄鼠標移動是的Y座標
            this.clickDrag=[];
            this.lock=false;//鼠標移動前,判斷鼠標是否按下
            this.isEraser=false;
            //this.Timer=null;//橡皮擦啓動計時器
            //this.radius=5;
            this.storageColor="#000000";
            this.eraserRadius=15;//擦除半徑值
            this.color=["#000000","#FF0000","#80FF00","#00FFFF","#808080","#FF8000","#408080","#8000FF","#CCCC00"];//畫筆顏色值
            this.fontWeight=[2,5,8];
            this.$=function(id){return typeof id=="string"?document.getElementById(id):id;};
            this.canvas=this.$("canvas");
            if (this.canvas.getContext) {
            } else {
                alert("您的瀏覽器不支持 canvas 標籤");
                return;
            }
            this.cxt=this.canvas.getContext('2d');
            this.cxt.lineJoin = "round";//context.lineJoin - 指定兩條線段的連接方式
            this.cxt.lineWidth = 5;//線條的寬度
            this.iptClear=this.$("clear");
            this.revocation=this.$("revocation");
            this.imgurl=this.$("imgurl");//圖片路徑按鈕
            this.w=this.canvas.width;//取畫布的寬
            this.h=this.canvas.height;//取畫布的高
            this.touch =("createTouch" in document);//判定是否爲手持設備
            this.StartEvent = this.touch ? "touchstart" : "mousedown";//支持觸摸式使用相應的事件替代
         this.MoveEvent = this.touch ? "touchmove" : "mousemove";
         this.EndEvent = this.touch ? "touchend" : "mouseup";
         this.bind();
        },
        bind:function()
        {
            var t=this;
            /*清除畫布*/
            this.iptClear.οnclick=function()
            {
                t.clear();
            };
            /*鼠標按下事件,記錄鼠標位置,並繪製,解鎖lock,打開mousemove事件*/
            this.canvas['on'+t.StartEvent]=function(e)
            {   
                var touch=t.touch ? e.touches[0] : e;
                var _x=touch.clientX - touch.target.offsetLeft;//鼠標在畫布上的x座標,以畫布左上角爲起點
                var _y=touch.clientY - touch.target.offsetTop;//鼠標在畫布上的y座標,以畫布左上角爲起點             
                if(t.isEraser)
                {
                /*
                    t.cxt.globalCompositeOperation = "destination-out";
                    t.cxt.beginPath();
                    t.cxt.arc(_x, _y,t.eraserRadius, 0, Math.PI * 2);
                    t.cxt.strokeStyle = "rgba(250,250,250,0)";
                    t.cxt.fill();
                    t.cxt.globalCompositeOperation = "source-over";
                    */
                    t.resetEraser(_x,_y,touch);
                }else
                {
                    t.movePoint(_x,_y);//記錄鼠標位置
                    t.drawPoint();//繪製路線
                }
                t.lock=true;
            };
            /*鼠標移動事件*/
            this.canvas['on'+t.MoveEvent]=function(e)
            {
                var touch=t.touch ? e.touches[0] : e;
                if(t.lock)//t.lock爲true則執行
                {
                    var _x=touch.clientX - touch.target.offsetLeft;//鼠標在畫布上的x座標,以畫布左上角爲起點
                    var _y=touch.clientY - touch.target.offsetTop;//鼠標在畫布上的y座標,以畫布左上角爲起點
                    if(t.isEraser)
                    {
                        //if(t.Timer)clearInterval(t.Timer);
                        //t.Timer=setInterval(function(){
                            t.resetEraser(_x,_y,touch);
                        //},10);
                    }
                    else
                    {
                        t.movePoint(_x,_y,true);//記錄鼠標位置
                        t.drawPoint();//繪製路線
                    }
                }
            };
            this.canvas['on'+t.EndEvent]=function(e)
            {
                /*重置數據*/
                t.lock=false;
                t.x=[];
                t.y=[];
                t.clickDrag=[];
                clearInterval(t.Timer);
                t.Timer=null;
                
            };
            this.revocation.οnclick=function()
            {
                t.redraw();
            };
            this.changeColor();
            this.imgurl.οnclick=function()
            {
                t.getUrl();
            };
            /*橡皮擦*/
            this.$("eraser").οnclick=function(e)
         {
             t.isEraser=true;
                t.$("error").style.color="red";
                t.$("error").innerHTML="您已使用橡皮擦!";
         };
        },
        movePoint:function(x,y,dragging)
        {   
            /*將鼠標座標添加到各自對應的數組裏*/
            this.x.push(x);
            this.y.push(y);
            this.clickDrag.push(y);
        },
        drawPoint:function(x,y,radius)
        {
            for(var i=0; i < this.x.length; i++)//循環數組
            {   
                this.cxt.beginPath();//context.beginPath() , 準備繪製一條路徑
                
                if(this.clickDrag[i] && i){//當是拖動而且i!=0時,從上一個點開始畫線。
                    this.cxt.moveTo(this.x[i-1], this.y[i-1]);//context.moveTo(x, y) , 新開一個路徑,並指定路徑的起點
                }else{
                    this.cxt.moveTo(this.x[i]-1, this.y[i]);
                }
                this.cxt.lineTo(this.x[i], this.y[i]);//context.lineTo(x, y) , 將當前點與指定的點用一條筆直的路徑連接起來
                this.cxt.closePath();//context.closePath() , 如果當前路徑是打開的則關閉它
                this.cxt.stroke();//context.stroke() , 繪製當前路徑
            }
        },
        clear:function()
        {
            this.cxt.clearRect(0, 0, this.w, this.h);//清除畫布,左上角爲起點
        },
        redraw:function()
        {  
            /*撤銷*/
            this.cxt.restore();  
            
        },  
        preventDefault:function(e){
            /*阻止默認*/
            var touch=this.touch ? e.touches[0] : e;
      if(this.touch)touch.preventDefault();
      else window.event.returnValue = false;
     },
     changeColor:function()
     {
         /*爲按鈕添加事件*/
         var t=this,iptNum=this.$("color").getElementsByTagName("input"),fontIptNum=this.$("font").getElementsByTagName("input");
         for(var i=0,l=iptNum.length;i<l;i++)
         {
             iptNum[i].index=i;
             iptNum[i].οnclick=function()
             {
                 t.cxt.save();
                 t.cxt.strokeStyle = t.color[this.index];
                 t.storageColor=t.color[this.index];
                 t.$("error").style.color="#000";
                 t.$("error").innerHTML="如果有錯誤,請使用橡皮擦:";
                 t.cxt.strokeStyle = t.storageColor;
                 t.isEraser=false;
             }
         }
         for(var i=0,l=fontIptNum.length;i<l;i++)
         {
             t.cxt.save();
             fontIptNum[i].index=i;
             fontIptNum[i].οnclick=function()
             {
                 t.changeBackground(this.index);
                 t.cxt.lineWidth = t.fontWeight[this.index];
                 t.$("error").style.color="#000";
                 t.$("error").innerHTML="如果有錯誤,請使用橡皮擦:";
                 t.isEraser=false;
                 t.cxt.strokeStyle = t.storageColor;
             }
         }
     },
     changeBackground:function(num)
     {
         /*添加畫筆粗細的提示背景顏色切換,灰色爲當前*/
         var fontIptNum=this.$("font").getElementsByTagName("input");
         for(var j=0,m=fontIptNum.length;j<m;j++)
            {
                fontIptNum[j].className="";
                if(j==num) fontIptNum[j].className="grea";
            }
     },
     getUrl:function()
     {
           this.$("html").innerHTML=this.canvas.toDataURL();
        },
        resetEraser:function(_x,_y,touch)
     {   
         
         /*使用橡皮擦-提醒*/
         var t=this;
            //this.cxt.lineWidth = 30;
            /*source-over 默認,相交部分由後繪製圖形的填充(顏色,漸變,紋理)覆蓋,全部瀏覽器通過*/
            t.cxt.globalCompositeOperation = "destination-out";
            t.cxt.beginPath();
            t.cxt.arc(_x, _y, t.eraserRadius, 0, Math.PI * 2);
            t.cxt.strokeStyle = "rgba(250,250,250,0)";
            t.cxt.fill();
            t.cxt.globalCompositeOperation = "source-over"
     }
     
        
    };
    paint.init();
})();
</script>
</body>

</html>


轉自:http://www.bcty365.com/content-62-6-1.html


         據網上的說法是ie8不支持canvas, 在ie9和ie10才添加了對canvas的支持。有說法ie8能採用excanvas_r3能模擬解決但效率不高,沒試驗出來。

         此例子在firefox,Google Chrome,360瀏覽器裏都能執行

發佈了115 篇原創文章 · 獲贊 105 · 訪問量 194萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章