您好,登錄后才能下訂單哦!
本篇文章給大家分享的是有關(guān)怎么在Html5中利用cavas繪制國旗,小編覺得挺實(shí)用的,因此分享給大家學(xué)習(xí),希望大家閱讀完這篇文章后可以有所收獲,話不多說,跟著小編一起來看看吧。
具體代碼如下所示:
var canvas = document.getElementById("canvas");//創(chuàng)建一個(gè)cavas畫板 var context = canvas.getContext('2d');//設(shè)置畫板屬性 var width=canvas.width; var height=width*2/3; context.fillStyle="red"; context.fillRect(0,0,width,height); var maxR = 0.15, minR = 0.05; var maxX = 0.55, maxY = 0.35;//大五星的位置 var minX = [0.80, 0.90, 0.90, 0.80,0.65,0.50,0.40];//各個(gè)小五角星的x坐標(biāo) var minY = [0.20, 0.30, 0.45, 0.55,0.60,0.60,0.50];//各個(gè)小五角星的y坐標(biāo) var ox = height * maxX, oy = height * maxY;
html代碼
<canvas id="canvas" width="600" height="400"></canvas>
js代碼
create5star(context,ox,oy,height * maxR,"#ff0",0);//繪制大五角星 for (var idx = 0; idx < 7; idx++) { var sx = minX[idx] * height, sy = minY[idx] * height; var theta = Math.atan((oy - sy)/(ox - sx)); create5star(context,sx, sy, height * minR, "#ff0",-Math.PI/2+theta); // 畫小五角星 } //繪制五角星 function create5star(context,sx,sy,radius,color,rotato){ context.save(); context.fillStyle=color; context.translate(sx,sy);//移動(dòng)坐標(biāo)原點(diǎn) context.rotate(Math.PI+rotato);//旋轉(zhuǎn) context.beginPath();//創(chuàng)建路徑 var x = Math.sin(0); var y= Math.cos(0); var dig = Math.PI/5 *4; for(var i = 0;i< 5;i++){//畫五角星的五條邊 var x = Math.sin(i*dig); var y = Math.cos(i*dig); context.lineTo(x*radius,y*radius); } context.closePath(); context.stroke(); context.fill(); context.restore(); }
以上就是怎么在Html5中利用cavas繪制國旗,小編相信有部分知識點(diǎn)可能是我們?nèi)粘9ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。