js+canvas繪制五角星的方法
更新時(shí)間：2016年01月28日 10:48:06 作者：m1870164
這篇文章主要介紹了js+canvas繪制五角星的方法,涉及JavaScript調(diào)用canvas組件結(jié)合數(shù)學(xué)運(yùn)算繪制圖形的相關(guān)技巧,需要的朋友可以參考下
本文實(shí)例講述了js+canvas繪制五角星的方法。分享給大家供大家參考，具體如下：
運(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繪制五角星 </title>
<script type="text/javascript" >
window.onload = function () {
var canvas = document.getElementById("canvas");
if (canvas) {
var context = canvas.getContext("2d");
drawStar(context, 50, 100, 100);
} else {
document.writeln("瀏覽器不支持canvas組件");
}
}
function drawStar(context, r, x, y) {
context.lineWidth = 5;
context.beginPath();
var dit = Math.PI * 4 / 5;
var sin = Math.sin(0) * r + y;
var cos = Math.cos(0) * r + x;
console.log(0+":"+0);
context.moveTo(cos, sin);
for (var i = 0; i < 5; i++) {
var tempDit = dit * i;
sin = Math.sin(tempDit) * r + y;
cos = Math.cos(tempDit) * r + x;
context.lineTo(cos, sin);
console.log(sin+":"+sin+":"+tempDit);
}
context.closePath();
context.strokeStyle = "red";
context.fillStyle = "#DDDDDD";
context.fill();
}
</script>
</head>
<body>
<canvas id="canvas" ></canvas>
</body>
</html>
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript動(dòng)畫(huà)特效與技巧匯總》《JavaScript運(yùn)動(dòng)效果與技巧匯總》及《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
js中自定義方法實(shí)現(xiàn)停留幾秒sleep
js中不存在自帶的sleep方法，要想休眠要自己定義個(gè)方法,需要的朋友可以參考下2014-07-07
作為前端，一直以來(lái)都知道HTTP劫持與XSS跨站腳本、CSRF跨站請(qǐng)求偽造。防御這些劫持最好的方法是從后端入手，前端能做的太少。而且由于源碼的暴露，攻擊者很容易繞過(guò)防御手段。但這不代表我們?nèi)チ私膺@塊的相關(guān)知識(shí)是沒(méi)意義的，本文的許多方法，用在其他方面也是大有作用。2021-05-05
這篇文章主要介紹了DatePickerDialog 自定義樣式及使用全解，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)左滑修改、刪除功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
javascript實(shí)現(xiàn)10個(gè)球隨機(jī)運(yùn)動(dòng)、碰撞實(shí)例詳解
這篇文章主要介紹了javascript實(shí)現(xiàn)10個(gè)球隨機(jī)運(yùn)動(dòng)、碰撞的方法,實(shí)例分析了javascript實(shí)現(xiàn)小球碰撞的原理與實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
剛接觸python的時(shí)候，最不習(xí)慣的事情，就是每個(gè)方法都要加一個(gè)self。無(wú)論Javascript還是C#，都直接一個(gè)this搞定，干嘛非要加一個(gè)變量self。2010-08-08
可能被忽略的一些JavaScript數(shù)組方法細(xì)節(jié)
這篇文章主要給大家介紹了一些可能被忽略的JavaScript數(shù)組方法細(xì)節(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
這篇文章主要介紹了ES6 javascript的異步操作,結(jié)合實(shí)例形式分析了ES5中異步操作的概念、原理、使用方法及相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-10-10
javascript實(shí)現(xiàn)的上下無(wú)縫滾動(dòng)效果
這篇文章主要介紹了javascript實(shí)現(xiàn)的上下無(wú)縫滾動(dòng)效果,具有無(wú)縫滾動(dòng)及響應(yīng)鼠標(biāo)滑過(guò)停止?jié)L動(dòng)的功能,簡(jiǎn)便實(shí)用,需要的朋友可以參考下2016-09-09
js學(xué)習(xí)心得_一個(gè)簡(jiǎn)單的動(dòng)畫(huà)庫(kù)封裝tween.js
下面小編就為大家?guī)?lái)一篇js學(xué)習(xí)心得_一個(gè)簡(jiǎn)單的動(dòng)畫(huà)庫(kù)封裝tween.js。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07