JavaScript強化教程——canvas

本文爲 H5EDU 機構官方 HTML5培訓 教程，主要介紹：JavaScript強化教程 —— canvas

使用 strokeText():
使用 "Arial" 字體在畫布上繪製一個高 30px 的文字（空心）：
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);

Canvas - 漸變
漸變能夠填充在矩形, 圓形, 線條, 文本等等, 各類形狀能夠本身定義不一樣的顏色。
如下有兩種不一樣的方式來設置Canvas漸變：
createLinearGradient(x,y,x1,y1) - 建立線條漸變
createRadialGradient(x,y,r,x1,y1,r1) - 建立一個徑向/圓漸變
當咱們使用漸變對象，必須使用兩種或兩種以上的中止顏色。
addColorStop()方法指定顏色中止，參數使用座標來描述，能夠是0至1.
使用漸變，設置fillStyle或strokeStyle的值爲 漸變，而後繪製形狀，如矩形，文本，或一條線。
使用 createLinearGradient():

建立一個線性漸變。使用漸變填充矩形:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

點擊進入JavaScript強化教程