html5使用canvas畫空心圓與實心圓
來源：易賢網 閱讀：1071 次 日期：2014-12-26 13:53:23
溫馨提示：易賢網小編為您整理了“html5使用canvas畫空心圓與實心圓”,方便廣大網友查閱！

這里給大家分享的是一個學習canvas的時候做的畫空心圓與實心圓的練習題，非常簡單。

<canvas id=canvas width=500 height=500 style=background-color: yellow;></canvas>

代碼如下:

var canvas=document.getelementbyid(canvas);

var cxt=canvas.getcontext(2d);

//畫一個空心圓

cxt.beginpath();

cxt.arc(200,200,50,0,360,false);

cxt.linewidth=5;

cxt.strokestyle=green;

cxt.stroke();//畫空心圓

cxt.closepath();

//畫一個實心圓

cxt.beginpath();

cxt.arc(200,100,50,0,360,false);

cxt.fillstyle=red;//填充顏色,默認是黑色

cxt.fill();//畫實心圓

cxt.closepath();

//空心和實心的組合

cxt.beginpath();

cxt.arc(300,300,50,0,360,false);

cxt.fillstyle=red;

cxt.fill();

cxt.strokestyle=green;

cxt.stroke();

cxt.closepath();

更多信息請查看IT技術專欄

更多信息請查看網頁制作
易賢網手機網站地址：html5使用canvas畫空心圓與實心圓
關于我們 | 聯系我們 | 人才招聘 | 網站聲明 | 網站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機站點

版權所有:易賢網