課程
/前端開發
/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();
舉報
Canvas系列教程第二課,詳解Canvas各接口，讓同學徹底掌握Canvas繪圖
1 回答用canvas 劃線 畫圓弧 周邊毛糙感特嚴重 比如下面的各個扇形的邊.. 求解答 3Q
2 回答繪制六邊形的時候不用通過moveTo設置起始點嗎？”
1 回答artisan.js如何畫三角形
1 回答這個矩形不是100，100這個點開始畫嗎？
1 回答為什么再畫圓形路徑的時候不用加save和store，在畫星星的時候要加呢
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
<strike id="slsye"></strike>
<li id="slsye"><center id="slsye"></center></li>
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();
}