js+canvas簡(jiǎn)單繪制圓圈的方法
更新時(shí)間：2016年01月28日 11:36:23 作者：m1870164
這篇文章主要介紹了js+canvas簡(jiǎn)單繪制圓圈的方法,涉及JavaScript調(diào)用canvas組件實(shí)現(xiàn)簡(jiǎn)單圖形繪制的相關(guān)技巧,需要的朋友可以參考下
本文實(shí)例講述了js+canvas簡(jiǎn)單繪制圓圈的方法。分享給大家供大家參考，具體如下：
運(yùn)行效果截圖如下：
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>canvas畫(huà)圓圈</title>
<script type="text/javascript" >
function drawCircle(id){
var canvas = document.getElementById(id);
if(canvas ) {
var context = canvas.getContext("2d");
context.fillStyle = "gray";
context.strokeStyle = "black";
context.fillRect(0, 0, 400, 400);
context.beginPath();
context.arc(100, 100, 50, 0, Math.PI*2, true);
context.closePath();
context.fillStyle = "green";
context.fill();
} else {
return;
}
}
window.onload = function () {
drawCircle("canvas");
}
</script>
</head>
<body>
<canvas id="canvas" width="400" style="background:red;" height="400"></canvas>
<hr />
</body>
</html>
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript動(dòng)畫(huà)特效與技巧匯總》及《JavaScript運(yùn)動(dòng)效果與技巧匯總》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
js中的關(guān)聯(lián)數(shù)組與普通數(shù)組詳解
下面小編就為大家?guī)?lái)一篇js中的關(guān)聯(lián)數(shù)組與普通數(shù)組詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
uniapp開(kāi)發(fā)小程序的開(kāi)發(fā)規(guī)范總結(jié)
uni-app 是一個(gè)使用 vue.js 開(kāi)發(fā)跨平臺(tái)應(yīng)用的前端框架,下面這篇文章主要給大家介紹了關(guān)于uniapp開(kāi)發(fā)小程序的開(kāi)發(fā)規(guī)范,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
這篇文章主要為大家詳細(xì)介紹了原生Js實(shí)現(xiàn)日歷掛件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
這篇文章主要介紹了JavaScript中的數(shù)值范圍介紹,本文是對(duì)JavaScript中Number類型的追根究底,讀完本文將會(huì)對(duì)Number類型有一個(gè)徹底了解,需要的朋友可以參考下2014-12-12
javascript提供了許多函數(shù)供開(kāi)發(fā)人員使用，下面給出一個(gè)簡(jiǎn)單介紹，更詳細(xì)的信息請(qǐng)參考Visual InterDev提供的在線幫助。2009-12-12
微信小程序云開(kāi)發(fā)之使用云數(shù)據(jù)庫(kù)
這篇文章主要為大家詳細(xì)介紹了微信小程序云開(kāi)發(fā)之使用云數(shù)據(jù)庫(kù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
選擇指定數(shù)量后checkbox不可選(變灰)javascript代碼
選擇指定數(shù)量后checkbox不可選(變灰)javascript代碼2009-06-06
深入淺出JavaScript前端中的設(shè)計(jì)模式
這篇文章主要介紹了JavaScript前端中的設(shè)計(jì)模式，設(shè)計(jì)模式是一套被反復(fù)使用，多數(shù)人知曉的，經(jīng)過(guò)分類編目的，代碼設(shè)計(jì)經(jīng)驗(yàn)的總結(jié)，感興趣想要詳細(xì)了解可以參考下文2023-05-05
mock.js模擬數(shù)據(jù)實(shí)現(xiàn)前后端分離
這篇文章主要為大家詳細(xì)介紹了mock.js模擬數(shù)據(jù)實(shí)現(xiàn)前后端分離，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
javascript實(shí)現(xiàn)遮罩層動(dòng)態(tài)效果實(shí)例
這篇文章主要介紹了javascript實(shí)現(xiàn)遮罩層動(dòng)態(tài)效果，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05