HTML 5 Canvas

2020-03-24 17:19:14

字體：大中小

來源：轉載

供稿：網友

getContext( 2d ) 對象是內建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

下面的兩行代碼繪制一個紅色的矩形：

cxt.fill >fillStyle 方法將其染成紅色，fillRect 方法規定了形狀、位置和尺寸。

通過指定從何處開始，在何處結束，來繪制一條線：
JavaScript 代碼：
 script type= text/javascript var c=document.getElementById( myCanvas var cxt=c.getContext( 2d cxt.moveTo(10,10);cxt.lineTo(150,50);cxt.lineTo(10,50);cxt.stroke(); /script 
canvas 元素：
 canvas id= myCanvas width= 200 height= 100 >親自試一試

通過規定尺寸、顏色和位置，來繪制一個圓：
JavaScript 代碼：
 script type= text/javascript var c=document.getElementById( myCanvas var cxt=c.getContext( 2d cxt.fill >canvas 元素：
 canvas id= myCanvas width= 200 height= 100 >親自試一試

使用您指定的顏色來繪制漸變背景：
JavaScript 代碼：
 script type= text/javascript var c=document.getElementById( myCanvas var cxt=c.getContext( 2d var grd=cxt.createLinearGradient(0,0,175,50);grd.addColorStop(0, #FF0000 grd.addColorStop(1, #00FF00 cxt.fill >canvas 元素：
 canvas id= myCanvas width= 200 height= 100 >親自試一試

把一幅圖像放置到畫布上：
JavaScript 代碼：
 script type= text/javascript var c=document.getElementById( myCanvas var cxt=c.getContext( 2d var img=new Image()img.src= flower.png cxt.drawImage(img,0,0); /script 
canvas 元素：
 canvas id= myCanvas width= 200 height= 100 >親自試一試
        鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。