您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)h5Canvas怎么繪制五星紅旗,小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
Canvas 繪圖 API 都沒(méi)有定義在 <canvas> 元素本身上,而是定義在通過(guò)畫布的 getContext() 方法獲得的一個(gè)“繪圖環(huán)境”對(duì)象上。
Canvas API 也使用了路徑的表示法。但是,路徑由一系列的方法調(diào)用來(lái)定義,而不是描述為字母和數(shù)字的字符串,比如調(diào)用 beginPath() 和 arc() 方法。
一旦定義了路徑,其他的方法,如 fill(),都是對(duì)此路徑操作。繪圖環(huán)境的各種屬性,比如 fillStyle,說(shuō)明了這些操作如何使用。
使用Canvas畫中國(guó)國(guó)旗,代碼:
XML/HTML Code復(fù)制內(nèi)容到剪貼板
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>中國(guó)標(biāo)準(zhǔn)國(guó)旗</title> </head> <body> <canvas id="canvas" width="600" height="400"></canvas> <script type="text/javascript"> // 使用HTML5繪制標(biāo)準(zhǔn)五星紅旗 var canvas = document.getElementById("canvas"); var context = canvas.getContext('2d'); var width = canvas.width; var height = width * 2 / 3; var w = width / 30;//小網(wǎng)格的寬 context.fillStyle = "red"; context.fillRect(0, 0, width, height); var maxR = 0.15, minR = 0.05;// var maxX = 0.25, maxY = 0.25;//大五星的位置 var minX = [0.50, 0.60, 0.60, 0.50]; var minY = [0.10, 0.20, 0.35, 0.45]; // 畫大 ☆ var ox = height * maxX, oy = height * maxY; create5star(context, ox, oy, height * maxR, "#ff0", 0);//繪制五角星 // 畫小 ★ for (var idx = 0; idx < 4; 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); } //輔助線 context.moveTo(0, height / 2) context.lineTo(width, height / 2); context.stroke(); context.moveTo(width / 2, 0); context.lineTo(width / 2, height); context.stroke(); //畫網(wǎng)格,豎線 for (var j = 0; j < 15; j++) { context.moveTo(j * w, 0); context.lineTo(j * w, height / 2); context.stroke(); } //畫網(wǎng)格,橫線 for (var j = 0; j < 10; j++) { context.moveTo(0, j * w); context.lineTo(width / 2, j * w); context.stroke(); } //畫大圓 context.beginPath(); context.arc(ox, oy, maxR * height, 0, Math.PI * 2, false); context.closePath(); context.stroke(); // 畫小圓 for (var idx = 0; idx < 4; idx++) { context.beginPath(); var sx = minX[idx] * height, sy = minY[idx] * height; context.arc(sx, sy, height * minR, 0, Math.PI * 2, false); context.closePath(); context.stroke(); } //大圓中心與小圓中心連接線 for (var idx = 0; idx < 4; idx++) { context.moveTo(ox, oy); var sx = minX[idx] * height, sy = minY[idx] * height; context.lineTo(sx, sy); context.stroke(); } //繪制五角星 /** * 創(chuàng)建一個(gè)五角星形狀. 該五角星的中心坐標(biāo)為(sx,sy),中心到頂點(diǎn)的距離為radius,rotate=0時(shí)一個(gè)頂點(diǎn)在對(duì)稱軸上 * rotate:繞對(duì)稱軸旋轉(zhuǎn)rotate弧度 */ 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(); } </script> </body> </html>
關(guān)于“h5Canvas怎么繪制五星紅旗”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。