HTML5 canvas基本繪圖之圖形組合

2020-03-24 18:20:18

字體：大中小

供稿：網(wǎng)友

canvas /canvas 只是一個繪制圖形的容器，除了id、html' target='_blank'>class、style等屬性外，還有height和width屬性。在 canvas 元素上繪圖主要有三步： 1.獲取 canvas 元素對應(yīng)的DOM對象，這是一個Canvas對象；
2.調(diào)用Canvas對象的getContext()方法，得到一個CanvasRenderingContext2D對象；
3.調(diào)用CanvasRenderingContext2D對象進(jìn)行繪圖。圖形組合： globalAlpha：設(shè)置或返回繪圖的當(dāng)前 alpha 或透明值該方法主要是設(shè)置圖形的透明度，這里就不具體介紹。 globalCompositeOperation：設(shè)置或返回新圖像如何繪制到已有的圖像上，該方法有以下屬性值：下面是一個小示例，可以通過點擊改變組合效果：XML/HTML Code復(fù)制內(nèi)容到剪貼板
border:1pxsolid#1C0EFA; display:block; margin:20pxauto; } #buttons{ width:1000px; margin:5pxauto; clear:both; } #buttonsa{ font-size:18px; display:block; float:left; margin-left:20px; } /style /head body canvasid= canvas width= 1000 height= 800 你的瀏覽器還不支持canvas /canvas divid= buttons ahref= # source-over /a ahref= # source-atop /a ahref= # source-in /a ahref= # source-out /a ahref= # destination-over /a ahref= # destination-atop /a ahref= # destination-in /a ahref= # destination-out /a ahref= # lighter /a ahref= # copy /a ahref= # xor /a /div /body scripttype= text/javascript window.onload=function(){ draw( source-over varbuttons=document.getElementById( buttons ).getElementsByTagName( a for(vari=0;i buttons.length;i++){ buttons[i].onclick=function(){ draw(this.text); returnfalse; }; } }; functiondraw(compositeStyle){ varcanvas=document.getElementById( canvas varcontext=canvas.getContext( 2d context.clearRect(0,0,canvas.width,canvas.height); //drawtitle context.font= bold40pxArial ; context.textAlign= center ; context.textBasedline= middle ; context.fillStyle= #150E0E ; context.fillText( globalCompositeOperation= +compositeStyle,canvas.width/2,60); //drawarect context.fillStyle= #F6082A ; context.fillRect(300,150,500,500); //drawatriangle context.globalCompositeOperation=compositeStyle; context.fillStyle= #1611F5 ; context.beginPath(); context.moveTo(700,250); context.lineTo(1000,750); context.lineTo(400,750); context.closePath(); context.fill(); } /script /htmlhtml教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：html5 touch事件實現(xiàn)觸屏頁面上下滑動(一)

下一篇：XHTML入門學(xué)習(xí)教程-XHTML超級鏈接