課程
/前端開(kāi)發(fā)
/Html5
/Canvas繪圖詳解
求畫各種六邊形
2015-11-03
源自:Canvas繪圖詳解 3-2
正在回答
window.onload=function(){
var canvas=document.getElementById("canvas");
canvas.width=1000;
canvas.height=600;
var context=canvas.getContext("2d");
// context.beginPath();
// // for(var i=0;i<5;i++){
// // context.lineTo(Math.cos((18+72*i)/180*Math.PI)*200+300,-Math.sin((18+72*i)/180*Math.PI)*200+300);
// // context.lineTo(Math.cos((54+72*i)/180*Math.PI)*100+300,-Math.sin((54+72*i)/180*Math.PI)*100+300);
// // }
// context.closePath();
for(var j=0;j<8;j++){
drawStar(context,40,20,j+3,50+j*110,300);
context.stroke();
}
function drawStar(cxt,R,r,K,x,y){
cxt.beginPath();
for(var i=0;i<K;i++){
cxt.lineTo(Math.cos((360/K*i)/180*Math.PI)*R+x,-Math.sin((360/K*i)/180*Math.PI)*R+y);
cxt.lineTo(Math.cos((360/K*i+180/K)/180*Math.PI)*r+x,-Math.sin((360/K*i+180/K)/180*Math.PI)*r+y);
} ?
cxt.closePath();
舉報(bào)
Canvas系列教程第二課,詳解Canvas各接口,讓同學(xué)徹底掌握Canvas繪圖
1 回答用canvas 劃線 畫圓弧 周邊毛糙感特嚴(yán)重 比如下面的各個(gè)扇形的邊.. 求解答 3Q
2 回答繪制六邊形的時(shí)候不用通過(guò)moveTo設(shè)置起始點(diǎn)嗎?”
1 回答artisan.js如何畫三角形
1 回答這個(gè)矩形不是100,100這個(gè)點(diǎn)開(kāi)始畫嗎?
1 回答為什么再畫圓形路徑的時(shí)候不用加save和store,在畫星星的時(shí)候要加呢
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購(gòu)課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
2016-01-05
window.onload=function(){
var canvas=document.getElementById("canvas");
canvas.width=1000;
canvas.height=600;
var context=canvas.getContext("2d");
// context.beginPath();
// // for(var i=0;i<5;i++){
// // context.lineTo(Math.cos((18+72*i)/180*Math.PI)*200+300,-Math.sin((18+72*i)/180*Math.PI)*200+300);
// // context.lineTo(Math.cos((54+72*i)/180*Math.PI)*100+300,-Math.sin((54+72*i)/180*Math.PI)*100+300);
// // }
// context.closePath();
for(var j=0;j<8;j++){
drawStar(context,40,20,j+3,50+j*110,300);
context.stroke();
}
}
function drawStar(cxt,R,r,K,x,y){
cxt.beginPath();
for(var i=0;i<K;i++){
cxt.lineTo(Math.cos((360/K*i)/180*Math.PI)*R+x,-Math.sin((360/K*i)/180*Math.PI)*R+y);
cxt.lineTo(Math.cos((360/K*i+180/K)/180*Math.PI)*r+x,-Math.sin((360/K*i+180/K)/180*Math.PI)*r+y);
} ?
cxt.closePath();
}