HTML5 canvas基本繪圖之填充樣式實(shí)現(xiàn)

2020-03-24 18:31:17

字體：大中小

供稿：網(wǎng)友

canvas /canvas 是HTML5中新增的標(biāo)簽，用于繪制圖形，實(shí)際上，這個(gè)標(biāo)簽和其他的標(biāo)簽一樣，其特殊之處在于該標(biāo)簽可以獲取一個(gè)CanvasRenderingContext2D對(duì)象，我們可以通過JavaScript腳本來控制該對(duì)象進(jìn)行繪圖。 canvas /canvas 只是一個(gè)繪制圖形的容器，除了id、html' target='_blank'>class、style等屬性外，還有height和width屬性。在 canvas 元素上繪圖主要有三步： 1.獲取 canvas 元素對(duì)應(yīng)的DOM對(duì)象，這是一個(gè)Canvas對(duì)象；
2.調(diào)用Canvas對(duì)象的getContext()方法，得到一個(gè)CanvasRenderingContext2D對(duì)象；
3.調(diào)用CanvasRenderingContext2D對(duì)象進(jìn)行繪圖。填充樣式前面用到的fillStyle和strokeStyle除了設(shè)置顏色外，還能設(shè)置其他填充樣式，這里以fillStyle為例：線性漸變使用步驟
（1）var grd = context.createLinearGradient( xstart , ystart, xend , yend )創(chuàng)建一個(gè)線性漸變，設(shè)置起始坐標(biāo)和終點(diǎn)坐標(biāo)；
（2）grd.addColorStop( stop , color )為線性漸變添加顏色，stop為0~1的值；
（3）context.fill > 徑向漸變
該方法與線性漸變使用方法類似，只是第一步接收的參數(shù)不一樣
var grd = context.createRadialGradient(x0 , y0, r0 , x1 , y1 , r1 );接收起始圓心的坐標(biāo)和圓半徑以及終點(diǎn)圓心的坐標(biāo)和圓的半徑。位圖填充
createPattern( img , repeat-style )使用圖片填充，repeat-style可以取repeat、repeat-x、repeat-y、no-repeat。JavaScript Code復(fù)制內(nèi)容到剪貼板
varcanvas=document.getElementById( canvas ); varcontext=canvas.getContext( 2d ); //線性漸變 vargrd=context.createLinearGradient(10,10,100,350); grd.addColorStop(0, #1EF9F7 ); grd.addColorStop(0.25, #FC0F31 ); grd.addColorStop(0.5, #ECF811 ); grd.addColorStop(0.75, #2F0AF1 ); grd.addColorStop(1, #160303 ); context.fillStyle=grd; context.fillRect(10,10,100,350); //徑向漸變 vargrd=context.createRadialGradient(325,200,0,325,200,200); grd.addColorStop(0, #1EF9F7 ); grd.addColorStop(0.25, #FC0F31 ); grd.addColorStop(0.5, #ECF811 ); grd.addColorStop(0.75, #2F0AF1 ); grd.addColorStop(1, #160303 ); context.fillStyle=grd; context.fillRect(150,10,350,350); //位圖填充 varbgimg=newImage(); bgimg.src= background.jpg ; bgimg.onload=function(){ varpattern=context.createPattern(bgimg, repeat ); context.fillStyle=pattern; context.stroke >效果如下：以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持phpstudy。html教程

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

上一篇：制作主流郵箱能正常顯示的HTML郵件的技巧_0

下一篇：html中適合新手的小練習(xí)分享