怎么在html5中利用Canvas繪圖

怎么在html5中利用Canvas繪圖？針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡(jiǎn)單易行的方法。

一、什么是Canvas

Canvas 是H5的一部分，允許腳本語言動(dòng)態(tài)渲染圖像。Canvas 定義一個(gè)區(qū)域，可以由html屬性定義該區(qū)域的寬高，javascript代碼可以訪問該區(qū)域，通過一整套完整的繪圖功能（API）,在網(wǎng)頁上渲染動(dòng)態(tài)效果圖。

二、Canvas 能做什么

游戲：毫無疑問，游戲在HTML5領(lǐng)域具有舉足輕重的地位。HTML5在基于Web的圖像顯示方面比Flash更加立體、更加精巧。

圖表制作：圖表制作時(shí)常被人們忽略，但無論企業(yè)內(nèi)部還是企業(yè)間交流合作都離不開圖表。現(xiàn)在一些開發(fā)者使用HTML/CSS完成圖標(biāo)制作。當(dāng)然，使用SVG（可縮放矢量圖形）來完成圖表制作也是非常好的方法。

字體設(shè)計(jì)：對(duì)于字體的自定義渲染將完全可以基于Web，使用HTML5技術(shù)進(jìn)行實(shí)現(xiàn)。

圖形編輯器：圖形編輯器能夠100%基于Web實(shí)現(xiàn)。

其他可嵌入網(wǎng)站的內(nèi)容：類似圖表、音頻、視頻，還有許多元素能夠更好地與Web融合，并且不需要任何插件。

三、Canvas基本用法

1、使用<canvas>必須先設(shè)置其width和height屬性，指定可繪圖區(qū)域大小,只指定寬高不添加樣式或者繪制圖像的話，在頁面中將看不到該元素。

<canvas id='draw' width='200px' height='200px'></canvas>

2、繪制圖像的話，我們首先要取到canvas并調(diào)用getContext()方法，然后傳入上下文名字（2D/3D）,2D有兩種基本繪圖操作|填充(fillStyle)|描邊(strokeStyle)|，這兩個(gè)屬性默認(rèn)值為#000

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

3、使用toDataURL()方法，可以導(dǎo)出<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);           
}

4、繪制矩形，主要有三個(gè)方法，fillRect()為矩形填充顏色、strokeRect()為矩形描邊、clearRect()清除矩形。這三個(gè)方法都接收4個(gè)參數(shù)x/y/w/h，矩形的左上角坐標(biāo)和寬高

var draw = document.getElementById('draw');
//確認(rèn)瀏覽器是否支持<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);
    
    //在兩個(gè)矩形重疊的地方清除一個(gè)小矩形
    context.clearRect(40,40,10,10);
}

5、繪制路徑，通過路徑可以創(chuàng)造出復(fù)雜的形狀和線條，要繪制路徑，首先要調(diào)用beginPath()方法，再通過以下方法來實(shí)際的繪制路徑

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

moveTo(x,y) 將游標(biāo)移動(dòng)到(x,y)，不畫線。可以用來修改所謂的上一點(diǎn)坐標(biāo)*

arcTo(x1,y1,x2,y2,radius)
從上一點(diǎn)開始繪制一條曲線到(x2,y2),并且以給定的radius穿過(x1,y1)

lineTo(x,y) 從上一點(diǎn)開始繪制一條直線，到(x,y)

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

//接下來繪制一個(gè)不帶數(shù)字的時(shí)鐘  
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);
    //繪制內(nèi)圓
    context.moveTo(194,100);
    context.arc(100,100,94,0,2*Math.PI,false);
    //繪制分針
    context.moveTo(100,100);
    context.lineTo(100,15);
    //繪制時(shí)針
    context.moveTo(100,100);
    context.lineTo(35,100);
    //描邊路徑
    context.stroke();
    context.strokeStyle = '#f00';            
}

6 . 繪制文本，主要有兩個(gè)方法，fillText(),strokeText(),都接收四個(gè)參數(shù)|text(要繪制的文本)|x|y|最大像素寬度(可選)|，這兩個(gè)方法都已下列三個(gè)屬性為基礎(chǔ)

font文字樣式，大小，字體等

textAlign 文本對(duì)其方式|start|end|left|right|center|

textBaseline 文本的基線|top|hanging|middle|alphabetic|ideographic|bottom|      

 //在表盤繪制12點(diǎn)
 context.font = 'bold 12px Arial';
 context.textAlign = 'center';
 context.textBaseline = 'middle';
 context.fillText('12',100,20);

7 . 變換

rotate(angel) 圍繞原點(diǎn)旋轉(zhuǎn)圖像angle弧度

scale(scaleX,scaleY) 縮放圖像，x*scaleX,y*scaleY  默認(rèn)1

translate(x,y) 將坐標(biāo)原點(diǎn)移動(dòng)到(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);
    //繪制內(nèi)圓
    context.moveTo(194,100);
    context.arc(100,100,94,0,2*Math.PI,false);
    //變換原點(diǎn)
    context.translate(100,100);
    //旋轉(zhuǎn)表針
    context.rotate(1)
    //繪制分針
    context.moveTo(0,0);
    context.lineTo(0,-85);
    //繪制時(shí)針
    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個(gè)參數(shù): 要繪制的圖像 原圖像|x|y|w|h|  目標(biāo)圖像|x|y|w|h|

9 . 陰影和漸變

 陰影主要是以下幾個(gè)屬性值

1.  shadowColor

2.  shadowOffsetX : X軸陰影偏移量

3.  shadowOffsetY : Y軸陰影偏移量

4.  shadowBlur : 模糊像素?cái)?shù)，默認(rèn)0，不模糊

 var context = draw.getContext('2d');
 //設(shè)置陰影
 context.shadowColor = 'rgba(210,210,210,.5)';
 context.shadowOffersetX = '5';
 
 漸變 創(chuàng)建一個(gè)新的線性漸變 createLinearGradient()方法，有四個(gè)參數(shù)|x1|y1|x2|y2|分別為起點(diǎn)的坐標(biāo)和終點(diǎn)的坐標(biāo)
 var gradient = context.createLinearGradient(30,30,70,70);
 gradient.addColorStop(0,'#fff');    //0表示開始
 gradient.addColorStop(1,'#000');    //1表示結(jié)束
 //使用定義好的漸變屬性
 context.fillStyle = gradient;    //填充的時(shí)候放入漸變
 context.fillRect(30,30,50,50);

創(chuàng)建一個(gè)放射漸變 createRadialGradient(),六個(gè)參數(shù)|x1|y2|radius1|x2|y2|radius2|分別為第一個(gè)圓心和半徑第二個(gè)圓心和半徑，用法和線性漸變相同

10 . 使用圖像數(shù)據(jù)，可以通過getImageData()取得原始圖像數(shù)據(jù)。四個(gè)參數(shù)|x|y|w|h|。每個(gè)ImageData對(duì)象有三個(gè)屬性，width/height/data，data是一個(gè)數(shù)組，內(nèi)部存著每一個(gè)像素的數(shù)據(jù),每個(gè)元素的值介于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];
  
//實(shí)現(xiàn)一個(gè)灰色過濾器
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);
    //獲取圖像數(shù)據(jù)
    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];
        //計(jì)算rgb的平均值
        average = Math.floor((red+green+blue)/3);
        //設(shè)置顏色值
        data[i] = average;
        data[i+1] = average;
        data[i+2] = average;
    }   
    imageData.data = data;
    //把數(shù)據(jù)繪制在畫布
    context.putImageData(imageData,0,0)
}

關(guān)于怎么在html5中利用Canvas繪圖問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。