window.onload = function() {
//得到2d渲染上下文
var context = document.getelementbyid("mycanvas").getcontext("2d");
var x = 50, y = 50, //
原點座標
radius = 50, //
半徑 startangle = 0, //
起始弧度
endangle = math.pi * 2, 終止弧度
anticlockwise = false; //
是否按逆時針
//0度為沿x水平方向
//畫乙個圓
context.beginpath();
context.arc(x, y, radius, startangle, endangle, anticlockwise);
context.fillstyle = "red";
context.fill();
//畫1/4個圓
context.beginpath();
x = 150, y = 150, startangle = 0, endangle = math.pi / 2;
context.arc(x, y, radius, startangle, endangle, anticlockwise);
context.lineto(x, y);
//需要連線原點形成半圓封閉區
context.closepath(); //
閉合路徑，這裡填充會自動閉合，也可以不寫
context.fillstyle = "blue";
context.fill();
//弧形填充
context.beginpath();
x = 160, y = 50;
context.arc(x, y, radius, startangle, endangle,
true
); context.fillstyle = "green";
context.fill();
html5 canvas 2 猜字母遊戲
今天我們要用canvas製作乙個猜字母的小遊戲，先來張效果圖。遊戲設計很簡單，系統會隨機從a z的26個字母中選擇乙個儲存起來，你鍵盤輸入乙個字母，系統會提示你正確字元比你當前輸入字母小還是大，直到你輸入正確的字母遊戲才結束。下面介紹js 中需要用到的一些變數及其他們的含義，系統會在開始的時候初始化...
HTML5 canvas 繪製圓形
canvas繪製圓形的思路 1 建立路徑 beginpath 2 建立圓形的路徑 3 關閉路徑 closepath 路徑不關閉也能繪製出圖形 4 設定繪製樣式。建立圓形路徑時需要用到物件的arc方法，方法定義如 arc x,y,radius,startangle,endangle,countercl...
html5 Canvas繪製線條
function draw cxi.beginpath 初始化路徑繪製 cxi.moveto 75,50 將路徑的 起始點 座標確定 cxi.lineto 100,85 將另乙個 結點 座標確定 cxi.lineto 100,20 將另二個 結點 座標確定 這裡的結點可以理解成photoshop裡面...