H5使用Canvas繪圖

時間 2019-12-07

標籤 h5 使用 canvas 繪圖简体版

原文原文鏈接

1、什麼是Canvas

Canvas 是H5的一部分，容許腳本語言動態渲染圖像。Canvas 定義一個區域，能夠由html屬性定義該區域的寬高，javascript代碼能夠訪問該區域，經過一整套完整的繪圖功能（API）,在網頁上渲染動態效果圖。

2、Canvas 能作什麼

遊戲：毫無疑問，遊戲在HTML5領域具備舉足輕重的地位。HTML5在基於Web的圖像顯示方面比Flash更加立體、更加精巧。javascript
圖表製做：圖表製做時常被人們忽略，但不管企業內部仍是企業間交流合做都離不開圖表。如今一些開發者使用HTML/CSS完成圖標製做。固然，使用SVG（可縮放矢量圖形）來完成圖表製做也是很是好的方法。html
字體設計：對於字體的自定義渲染將徹底能夠基於Web，使用HTML5技術進行實現。java
圖形編輯器：圖形編輯器可以100%基於Web實現。canvas
其餘可嵌入網站的內容：相似圖表、音頻、視頻，還有許多元素可以更好地與Web融合，而且不須要任何插件。數組

3、Canvas基本用法

使用<canvas>必須先設置其width和height屬性，指定可繪圖區域大小,只指定寬高不添加樣式或者繪製圖像的話，在頁面中將看不到該元素。瀏覽器
```
<canvas id='draw' width='200px' height='200px'></canvas>
```

繪製圖像的話，咱們首先要取到canvas並調用getContext()方法，而後傳入上下文名字（2D/3D）,2D有兩種基本繪圖操做|填充(fillStyle)|描邊(strokeStyle)|，這兩個屬性默認值爲#000app

var draw = document.getElementById('draw');
//確認瀏覽器是否支持<canvas>元素
if(draw.getContext){    
    var context = draw.getContext('2d');
    //給context繪製紅色的邊框
    context.strokeStyle = '#f00';    
    //內部填充大草原的顏色
    context.fillStyle = '#0f0';
}

使用toDataURL()方法，能夠導出<canvas>元素上繪製的圖像編輯器

var draw = document.getElementById('draw');
if(draw.getContext){    
    //顯示圖像，toDataURL()獲取到的是一串base64的字符串
    var drawURL = draw.toDataURL('image/png');
    var image = document.createElement('img');
    image.src = drawURL;
    document.body.appendChild(image);           
}

繪製矩形，主要有三個方法，fillRect()爲矩形填充顏色、strokeRect()爲矩形描邊、clearRect()清除矩形。這三個方法都接收4個參數x/y/w/h，矩形的左上角座標和寬高ide

var draw = document.getElementById('draw');
//確認瀏覽器是否支持<canvas>元素
if(draw.getContext){    
    var context = draw.getContext('2d');
    
    //繪製紅色矩形,綠色描邊
    context.fillStyle = '#f00';
    context.strokeStyle = '#0f0';
    context.strokeRect(10,10,50,50);
    context.fillRect(10,10,50,50);
    
    //繪製綠色矩形,紅色描邊
    context.fillStyle = '#0f0';
    context.strokeStyle = '#f00';
    context.strokeRect(10,10,50,50);
    context.fillRect(10,10,50,50);
    
    //在兩個矩形重疊的地方清除一個小矩形
    context.clearRect(40,40,10,10);
}

繪製路徑，經過路徑能夠創造出複雜的形狀和線條，要繪製路徑，首先要調用beginPath()方法，再經過如下方法來實際的繪製路徑字體

arc(x,y,radius,startAngle,endAngle,conterclockwise)
(x,y)圓心座標、radius半徑、(startAngle,endAngle)起始角度和終止角度、conterclockwise順時針(false)/逆時針(true)

moveTo(x,y) 將遊標移動到(x,y)，不畫線。能夠用來修改所謂的上一點座標*

arcTo(x1,y1,x2,y2,radius)
從上一點開始繪製一條曲線到(x2,y2),而且以給定的radius穿過(x1,y1)

lineTo(x,y) 從上一點開始繪製一條直線，到(x,y)

rect(x,y,width,height)
從(x,y)開始繪製一個矩形，寬高爲width、height。這個方法繪製的是矩形路徑，而非strokeRect()和fillRect()所繪製的獨立的形狀

//接下來繪製一個不帶數字的時鐘  
var draw = document.getElementById('draw');
if(draw.getContext){
    var context = draw.getContext('2d');
    //開始路徑
    context.beginPath();
    //繪製外圓
    context.arc(100,100,99,0,2*Math.PI,false);
    //繪製內圓
    context.moveTo(194,100);
    context.arc(100,100,94,0,2*Math.PI,false);
    //繪製分針
    context.moveTo(100,100);
    context.lineTo(100,15);
    //繪製時針
    context.moveTo(100,100);
    context.lineTo(35,100);
    //描邊路徑
    context.stroke();
    context.strokeStyle = '#f00';            
}

font文字樣式，大小，字體等
 textAlign 文本對其方式|start|end|left|right|center|
 textBaseline 文本的基線|top|hanging|middle|alphabetic|ideographic|bottom|      
 
 //在錶盤繪製12點
 context.font = 'bold 12px Arial';
 context.textAlign = 'center';
 context.textBaseline = 'middle';
 context.fillText('12',100,20);

7 . 變換

rotate(angel) 圍繞原點旋轉圖像angle弧度
 scale(scaleX,scaleY) 縮放圖像，x*scaleX,y*scaleY  默認1
 translate(x,y) 將座標原點移動到(x,y)
 
 var draw = document.getElementById('draw');
 if(draw.getContext){
    var context = draw.getContext('2d');
    //開始路徑
    context.beginPath();
    //繪製外圓
    context.arc(100,100,99,0,2*Math.PI,false);
    //繪製內圓
    context.moveTo(194,100);
    context.arc(100,100,94,0,2*Math.PI,false);
    //變換原點
    context.translate(100,100);
    //旋轉錶針
    context.rotate(1)
    //繪製分針
    context.moveTo(0,0);
    context.lineTo(0,-85);
    //繪製時針
    context.moveTo(0,0);
    context.lineTo(-65,0);
    //描邊路徑
    context.stroke();
    context.strokeStyle = '#f00';            
}

8 . 繪製圖像，drawImage()

var img = document.getElementByTagNames('image')[0];
 context.drawImage(img,0,10,50,50,0,100,40,60);
 9個參數: 要繪製的圖像 原圖像|x|y|w|h|  目標圖像|x|y|w|h|

9 . 陰影和漸變

陰影主要是如下幾個屬性值
 shadowColor
 shadowOffsetX : X軸陰影偏移量
 shadowOffsetY : Y軸陰影偏移量
 shadowBlur : 模糊像素數，默認0，不模糊
 
 var context = draw.getContext('2d');
 //設置陰影
 context.shadowColor = 'rgba(210,210,210,.5)';
 context.shadowOffersetX = '5';
 
 漸變 建立一個新的線性漸變 createLinearGradient()方法，有四個參數|x1|y1|x2|y2|分別爲起點的座標和終點的座標
 var gradient = context.createLinearGradient(30,30,70,70);
 gradient.addColorStop(0,'#fff');    //0表示開始
 gradient.addColorStop(1,'#000');    //1表示結束
 //使用定義好的漸變屬性
 context.fillStyle = gradient;    //填充的時候放入漸變
 context.fillRect(30,30,50,50);
 
 建立一個放射漸變 createRadialGradient(),六個參數|x1|y2|radius1|x2|y2|radius2|分別爲第一個圓心和半徑第二個圓心和半徑，用法和線性漸變相同

10 . 使用圖像數據，能夠經過getImageData()取得原始圖像數據。四個參數|x|y|w|h|。每一個ImageData對象有三個屬性，width/height/data，data是一個數組，內部存着每個像素的數據,每一個元素的值介於0-255之間

var imgdata = context.getImageData(0,0,100,100);
 var data = imgdata.data,
     red = data[0],
     green = data[1],
     blue = data[2],
     alpha = data[3];
  
//實現一個灰色過濾器
var draw = document.getElementById('draw');
if(draw.getContext){
    var context = draw.getContext('2d');
    var img = document.getElementsByTagName('image')[0],
        imageData,data,
        i,len,average,
        red,green,blue,alpha;
    //繪製原始圖像
    context.drawImage(img,0,0,100,100);
    //獲取圖像數據
    imageData = context.getImageData(0,0,img.width,img.height);
    data = imageData.data;
    for(i=0,len=data.length;i<len;i+=4){
        red = data[i];
        green = data[i+1];
        blue = data[i+2];
        alpha = data[i+3];
        //計算rgb的平均值
        average = Math.floor((red+green+blue)/3);
        //設置顏色值
        data[i] = average;
        data[i+1] = average;
        data[i+2] = average;
    }   
    imageData.data = data;
    //把數據繪製在畫布
    context.putImageData(imageData,0,0)
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。