首頁 >web前端 >H5教程 >HTML5 canvas畫圖的圖文程式碼詳解

HTML5 canvas畫圖的圖文程式碼詳解

黄舟
黄舟原創
2017-03-25 15:27:374333瀏覽

HTML5 canvas畫圖

HTML5 標籤用於繪製圖像(透過腳本,通常是JavaScript)。繪圖任務。於在畫布上繪製文字、線條、矩形、圓形等等。

一.畫圖

現實生活中,畫圖需要考慮:


#畫布

1.線條的粗細;

2.線條的顏色;3.線條的實;

畫線

1.起始點;

2.終點;

畫圓

1.圓點;

## 2.半徑;

3.實心、空心

畫出矩形

1.矩形的左上起點;

2.長方形的長、寬;

文字

1.字體樣式;

2.實心、空心;

#新增圖片等

二.畫圖API根據畫圖需要,canvas

有以下

API#canvas

###主要屬性與方法#### ###########
方法 #描述
save() 已儲存目前環境的狀態
restore() 傳回先前已儲存過的路徑狀態與屬性
#createEvent()  
getContext() #傳回一個對象,指出存取繪圖功能必要的 API
toDataURL() 回傳 canvas圖片的URL


canvas
#的API顏色、樣式和陰影屬性和方法

屬性 描述
fillStyle #設定或傳回用於填滿繪畫的顏色、漸層或模式
strokeStyle #設定或傳回用於筆觸的顏色、漸層或模式
shadowColor 設定或傳回用於陰影的顏色
shadowBlur 設定或傳回用於陰影的模糊等級
#shadowOffsetX 設定或傳回陰影距離形狀的水平距離
#shadowOffsetY 設定或返回陰影距形狀的垂直距離
在指定的方向上重複指定的元素##createRadialGradient()#建立放射狀/環形的漸層(用在畫布內容上)
方法 #描述
createLinearGradient() #建立線性漸層(用在畫布內容上)
createPattern()
#########addColorStop()############################################################# #####規定漸層物件中的顏色和停止位置################


Canvas的API-線條樣式屬性與方法


Canvas的API-矩形方法

##屬性 描述
lineCap 設定或傳回線條的結束端點樣式
lineJoin 設定或傳回兩條線相交時,所建立的轉角類型
#lineWidth 設定或傳回目前的線條寬度
miterLimit 設定或傳回最大斜接長度
#方法 描述
rect() 建立矩形
fillRect() 繪製"被填滿"的矩形
strokeRect() #繪製矩形(無填充)
clearRect() 在給定的矩形內清除指定的像素


Canvas的API-路徑方法

#
方法 描述
fill() #填入目前繪圖(路徑)
##stroke() 繪製已定義的路徑
#beginPath() 起始一條路徑,或重設目前路徑
#moveTo() 把路徑移到畫布中的指定點,不建立線條
#closePath() 從目前點回到起始點的路徑
lineTo() 新增一個新點,建立從該點到最後指定點的線條
clip() 從原始畫布剪下任意形狀和尺寸的區域
quadraticCurveTo() #建立二次貝塞爾曲線
bezierCurveTo() 建立三次方貝塞爾曲線
arc() 建立弧/曲線(用於建立圓形或部分圓)
arcTo() 建立兩切線之間的弧/曲線
isPointInPath() #如果指定的點位於目前路徑中,則傳回布林值


Canvas的API-轉換方法


Canvas的API-文字屬性與方法

方法 描述
#scale () 縮放目前繪圖至更大或更小
rotate() 旋轉目前繪圖
translate() 重新對應畫布上的(0, 0) 位置
#transform() 取代繪圖的目前轉換矩陣
##setTransform() 將目前轉換重設為單位矩陣。然後執行 transform()
#屬性 描述
font #設定或傳回文字內容的目前字體屬性
#textAlign 設定或傳回文字內容的目前對齊方式
textBaseline 設定或傳回在繪製文字時使用的目前文字基線

 

#方法 #說明
fillText() 在畫布上繪製"被填滿的"文字
strokeText() 在畫布上繪製文字(無填充)
measureText() 傳回包含指定文字寬度的物件


#Canvas的API-影像繪製方法

方法
##drawImage() #向畫布上繪製圖像、畫布或影片  chrome不支援
#


Canvas的API-像素操作方法與屬性

屬性 描述
width 傳回ImageData 物件的寬度
#height 傳回ImageData 物件的高度
data 會傳回一個對象,其包含指定的ImageData 物件的圖像資料

 

方法 描述
createImageData() #建立新的、空白的ImageData 物件
getImageData() 傳回ImageData 對象,該物件為畫布上指定的矩形複製像素資料
putImageData() 把影像資料(從指定的ImageData 物件)放回畫布上


#Canvas的API-映像合成屬性

##設定或傳回新影像如何繪製到已有的圖像上#


三.canvas簡單畫圖

3.1canvas API#練習

<!doctype html><html>
    <head></head>
    <body>
        <canvas width="500" height="800" style="background:yellow"  id="canvas">
            您的浏览器当前版本不支持canvas标签        
            </canvas>
        <script>
            //获取画布DOM  还不可以操作
            var canvas=document.getElementById(&#39;canvas&#39;);            
            //alert(canvas);
            //设置绘图环境
            var cxt=canvas.getContext(&#39;2d&#39;);            
            //alert(cxt);
            
            //画一条线段。
                //开启新路径                
                cxt.beginPath();                
                //设定画笔的宽度                
                cxt.lineWidth=10;                
                //设置画笔的颜色                
                cxt.strokeStyle="#ff9900";                
                //设定笔触的位置                
                cxt.moveTo(20,20);                
                //设置移动的方式                
                cxt.lineTo(100,20);                
                //画线                
                cxt.stroke();                
                //封闭路径                
                cxt.closePath();            
                //画一个空心圆形  
                凡是路径图形必须先开始路径,画完图之后必须结束路径
                //开始新路径                
                cxt.beginPath();                
                //重新设置画笔                
                cxt.lineWidth=3;
                cxt.strokeStyle="green";
                cxt.arc(200,200,50,0,360,false);
                cxt.stroke();                
                //封闭新路径                
                cxt.closePath();            
                //画一个实心圆形                
                cxt.beginPath();                
                //设置填充的颜色                
                cxt.fillStyle="rgb(255,0,0)";
                cxt.arc(200,100,50,0,360,false);
                cxt.fill();
                cxt.stroke();
                cxt.closePath();            
                //画一个矩形                
                cxt.beginPath();
                cxt.rect(300,20,100,100);
                cxt.stroke();
                cxt.closePath();                
                //其他方法 建议使用此方式                
                cxt.strokeRect(300,150,100,100)                
                //实心矩形                
                cxt.beginPath();
                cxt.rect(300,270,100,100);
                cxt.fill();
                cxt.closePath();                
                //其他方法 建议使用此方式                
                cxt.fillRect(300,390,100,100);            
                //设置文字                
                cxt.font="40px 宋体";//css font属性                
                cxt.fillText("jingwhale",20,300);                
                //将笔触设置为1像素                
                cxt.lineWidth=1;
                cxt.strokeText("jingwhale",20,350);            
                //画图 把一幅图片画到画布中  注意webkit内核的浏览器 chrome和猎豹不支持
                var img =new Image();
                img.src="xiaomm.jpg";
                cxt.drawImage(img,20,370,230,306);            
                //画一个三角形                
                cxt.beginPath();                
                //移动至开始点                
                cxt.moveTo(300,500);
                cxt.lineTo(300,600);
                cxt.lineTo(400,550);
                cxt.closePath();//填充或者画路径需要先闭合路径再画                
                cxt.stroke();                
                //实心三角形                
                cxt.beginPath();                
                //移动至开始点                
                cxt.moveTo(300,600);
                cxt.lineTo(300,700);
                
                cxt.lineTo(400,650);
                cxt.closePath();
                cxt.fill();            
                //旋转图片 图片
                //设置旋转环境                
                cxt.save();                    
                //在异次元空间重置0,0点的位置                    
                cxt.translate(20,20);                
                //图片/形状旋转
                    //设置旋转角度  参数是弧度  角度 0-360 弧度=角度*Math.PI/180                    
                    cxt.rotate(-30*Math.PI/180);
                    //旋转一个线段                    
                    cxt.lineWidth=10;
                    cxt.beginPath();
                    cxt.moveTo(0,0);
                    cxt.lineTo(20,100);
                    cxt.stroke();
                    cxt.closePath();                
                    //将旋转之后的元素放回原画布                
                    cxt.restore();                
                    //过程不可颠倒 先设置00点在旋转角度,然后画图
                
            //旋转图片                
            cxt.save();
                cxt.translate(20,370);
                cxt.rotate(-10*Math.PI/180);
                var img =new Image();
                img.src="xiaomm.jpg";
                cxt.drawImage(img,0,0,230,306);
                cxt.restore();            
                
        </script>
        
    </body></html>

3.2畫圖流程

1.設定、取得畫布DOM;

2.設定繪圖環境
  var cxt=canvas.getContext('2d');
3.開啟新路徑

cxt.beginPath();

4.設定畫筆的寬度
cxt.lineWidth=10;
5.設定畫筆的顏色
cxt.strokeStyle= "#ff9900";

6.依據API畫圖

7.封閉路徑
cxt.closePath();

3.3canvas 作業-星球運作

//获取canvas绘图环境
            var context = document.getElementById(&#39;canvas&#39;).getContext(&#39;2d&#39;);
            var time = 0;
            //星球轨道
            function drawTrack(){
                for(var i = 0; i < 8; i++){
                    //开始路径
                    context.beginPath();
                    context.arc(500,500,(i+1)*50,0,360,false);
                    //关闭路径
                    context.closePath();
                    context.strokeStyle = &#39;#fff&#39;;
                    context.stroke();
                }
            }
            //执行以下此函数,画出各星球的轨道
            drawTrack();

            //星球  星球对象的构造方法 实例化后能画出所有的星球
            function Star(x,y,radius,sColor,eColor,cycle){
            //星球需要的哪些属性
                //星球的坐标点
                this.x = x;
                this.y = y;
                //星球的半径
                this.radius = radius;
                //星球的颜色
                this.sColor = sColor;
                this.eColor = eColor;
                //公转周期
                this.cycle = cycle;

                //绘画出星球
                this.draw = function(){  //异次元空间进行绘画
                    context.save();
                    //重设0,0坐标点
                    context.translate(500,500);
                    //设置旋转角度
                    context.rotate(time*360/this.cycle*Math.PI/180);

                    context.beginPath();
                    context.arc(this.x,this.y,this.radius,0,360,false);
                    context.closePath();
                    //星球的填充色(径向渐变 开始色和结束色)
                    this.color = context.createRadialGradient(this.x,this.y,0,this.x,this.y,this.radius);
                    this.color.addColorStop(0,this.sColor);
                    this.color.addColorStop(1,this.eColor);
                    context.fillStyle = this.color;
                    context.fill();
                    context.restore();

                    time +=1;
                }
                
            }

            //各星球构造方法 从star中继承
            function Sun(){
                Star.call(this,0,0,20,&#39;#f00&#39;,&#39;#f90&#39;,0);
            }
            function Mercury(){
                Star.call(this,0,-50,10,&#39;#A69697&#39;,&#39;#5C3E40&#39;,87.70);
            }
            function Venus(){
                Star.call(this,0,-100,10,&#39;#C4BBAC&#39;,&#39;#1F1315&#39;,224.701);
            }
            function Earth(){
                Star.call(this,0,-150,10,&#39;#78B1E8&#39;,&#39;#050C12&#39;,365.2422);
            }
            function Mars(){
                Star.call(this,0,-200,10,&#39;#CEC9B6&#39;,&#39;#76422D&#39;,686.98);
            }
            function Jupiter(){
                Star.call(this,0,-250,10,&#39;#C0A48E&#39;,&#39;#322222&#39;,4332.589);
            }
            function Saturn(){
                Star.call(this,0,-300,10,&#39;#F7F9E3&#39;,&#39;#5C4533&#39;,10759.5);
            }
            function Uranus(){
                Star.call(this,0,-350,10,&#39;#A7E1E5&#39;,&#39;#19243A&#39;,30799.095);
            }
            function Neptune(){
                Star.call(this,0,-400,10,&#39;#0661B2&#39;,&#39;#1E3B73&#39;,164.8*365);
            }

            //各星球对象的实例化
            var sun = new Sun();
            var water = new Mercury();
            var gold = new Venus();
            var diqiu = new Earth();
            var fire = new Mars();
            var wood = new Jupiter();
            var soil = new Saturn();
            var sky = new Uranus();
            var sea = new Neptune();

            function move(){
                //清除画布
                context.clearRect(0,0,1000,1000);
                //重新绘制一遍轨道
                drawTrack();

                sun.draw();
                water.draw();
                gold.draw();
                diqiu.draw();
                fire.draw();
                wood.draw();
                soil.draw();
                sky.draw();
                sea.draw();
            }
            
            //星球围绕太阳运动起来
            setInterval(move,100);

示範

四.canvas畫圖實例-網頁畫圖

HTML5 canvas畫圖的圖文程式碼詳解

1.畫圖板功能分析

功能區(儲存、清空)
工具區(形狀與工具)
屬性設定區(顏色與線寬)
繪圖區域(canvas標籤)

2.技術需求分析

頁面佈局-> ;HTML5標籤
頁面美化->CSS2
功能設定->Javascript程式設計
Canvas API->屬性設定、畫線、寫字、畫圖、畫布操作(清空、取得畫布資訊)、
下載->php的下載(JS無法操作本機檔案)

#3.畫一個簡單的畫布

滑鼠點擊時
準備起始點moveTo()、設定標誌位
滑鼠移動時
判斷標誌位,值為true畫圖,false不畫圖
移動時指定路徑lineTo(),並且畫出stroke ()
滑鼠離開或抬
清空標誌位元

4.複雜的線上畫板

取得對應元素物件
設定點選狀態
設定觸發功能
顏色屬性設定
線寬屬性設定
繪圖形狀設定
工具指定

#5.html結構部分:

HTML5 canvas畫圖的圖文程式碼詳解

HTML5 canvas畫圖的圖文程式碼詳解

#6.畫圖技術點:

#整幅畫圖被滑鼠事件所控制


滑鼠按下的事件-》mousedown
滑鼠移動的事件-》mousemove
滑鼠抬起事件-》 mouseup

//鼠标按下的时候-》设置开始点canvas.onmousedown=function(evt){
//鼠标移动的时候-》不同的绘图(获取鼠标的位置)canvas.onmousemove=function(evt){}
//鼠标抬起的时候结束绘图canvas.onmouseup=function(){
#屬性 描述
#globalAlpha ##設定或傳回繪圖的目前alpha 或透明值
globalCompositeOperation

以上是HTML5 canvas畫圖的圖文程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn