js+canvas簡單繪制圓圈的方法
更新時間：2016年01月28日 11:36:23 作者：m1870164
這篇文章主要介紹了js+canvas簡單繪制圓圈的方法,涉及JavaScript調(diào)用canvas組件實現(xiàn)簡單圖形繪制的相關技巧,需要的朋友可以參考下
本文實例講述了js+canvas簡單繪制圓圈的方法。分享給大家供大家參考，具體如下：
運行效果截圖如下：
具體代碼如下：
<!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畫圓圈</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>
更多關于JavaScript相關內(nèi)容感興趣的讀者可查看本站專題：《JavaScript動畫特效與技巧匯總》及《JavaScript運動效果與技巧匯總》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
js中的關聯(lián)數(shù)組與普通數(shù)組詳解
下面小編就為大家?guī)硪黄猨s中的關聯(lián)數(shù)組與普通數(shù)組詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
uniapp開發(fā)小程序的開發(fā)規(guī)范總結
uni-app 是一個使用 vue.js 開發(fā)跨平臺應用的前端框架,下面這篇文章主要給大家介紹了關于uniapp開發(fā)小程序的開發(fā)規(guī)范,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
這篇文章主要為大家詳細介紹了原生Js實現(xiàn)日歷掛件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
這篇文章主要介紹了JavaScript中的數(shù)值范圍介紹,本文是對JavaScript中Number類型的追根究底,讀完本文將會對Number類型有一個徹底了解,需要的朋友可以參考下2014-12-12
javascript提供了許多函數(shù)供開發(fā)人員使用，下面給出一個簡單介紹，更詳細的信息請參考Visual InterDev提供的在線幫助。2009-12-12
這篇文章主要為大家詳細介紹了微信小程序云開發(fā)之使用云數(shù)據(jù)庫，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
選擇指定數(shù)量后checkbox不可選(變灰)javascript代碼
選擇指定數(shù)量后checkbox不可選(變灰)javascript代碼2009-06-06
這篇文章主要介紹了JavaScript前端中的設計模式，設計模式是一套被反復使用，多數(shù)人知曉的，經(jīng)過分類編目的，代碼設計經(jīng)驗的總結，感興趣想要詳細了解可以參考下文2023-05-05
mock.js模擬數(shù)據(jù)實現(xiàn)前后端分離
這篇文章主要為大家詳細介紹了mock.js模擬數(shù)據(jù)實現(xiàn)前后端分離，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
javascript實現(xiàn)遮罩層動態(tài)效果實例
這篇文章主要介紹了javascript實現(xiàn)遮罩層動態(tài)效果，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05