lang
="en"
>
>
charset
="utf-8"
>
>
titletitle
>
>
canvas
/* .lineargradient*/
style
>
head
>
>
class
="lineargradient"
>
div>
width
="600"
height
="400"
>
canvas
>
>
var mycanvas = document.
queryselector
('canvas');
var ctx = mycanvas.
getcontext
('2d');
/*fillstyle 'pink' '#000' 'rgb()' 'rgba()' */
/*也可以使用乙個漸變的方案了填充矩形*/
/*建立乙個漸變的方案*/
/*漸變是由長度的*/
/*x0y0 起始點 x1y1 結束點 確定長度和方向*/
var lineargradient = ctx.
createlineargradient
(100
,100
,500
,400);
lineargradient.
addcolorstop(0
,'pink');
'red');
lineargradient.
addcolorstop(1
,'blue');
ctx.fillstyle = lineargradient;
ctx.
fillrect
(100
,100
,400
,100);
/*pink---->blue*/
/*回想線性漸變---->要素 方向 起始顏色 結束顏色 */
/*通過兩個點的座標可以控制 漸變方向*/
script
>
body
>
html
>
用canvas繪製乙個簡易時鐘
在見識了html5中canvas的強大，筆者準備製作乙個簡易時鐘。下面就是成果啦，製作之前我們先分析一下，繪製乙個時鐘需要做哪些準備。一 1.首先這個時鐘分為表盤，指標 時針，分針，秒針 和數字三部分。2.表盤是個圓，這個簡單。3.繪製指標時，需要先獲取到系統時間，然後找到時間和角度的關係。4.然後...
使用canvas繪製乙個圓或者圓弧
arc x,y,radius,startangle,endangle,anticlockwise 畫乙個以 x,y 為圓心的以radius為半徑的圓弧 圓 從startangle開始到endangle結束，按照anticlockwise給定的方向 預設為順時針 來生成。arc 函式中表示角的單位是弧...
一天乙個canvas 圓形漸變（八）
這裡需要說明的是createradialgradient方法，引數有 xstart,ystart,radiusstart,xend,yend,radiusend 也就是說，它在實行漸變時，使用了兩個圓，乙個是原始的圓，乙個是漸變式圓，其實，這種通過座標與半徑控制的方式可以實現很多樣式，比如 立體圓 ...