在這之前
需要你懂得以下方法的使用：
- beginPath()
- moveTo()
- lineTo()
- closePath()
具體用法可以參考我的上一篇文章 canvas入門－利用canvas制作一個(gè)七巧板
矩形的繪制
canvas提供了三種繪制矩形的方法：
- fillRect(x, y, width, height)
繪制一個(gè)填充的矩形 - strokeRect(x, y, width, height)
繪制一個(gè)矩形的邊框 - clearRect(x, y, width, height)
清除制定矩形區(qū)域啊
上面方法的參數(shù)里 x 和 y 分別為相對(duì)于canvas原點(diǎn)的坐標(biāo)，width 和 height 設(shè)置了矩形的尺寸。
舉個(gè)栗子：
window.onload = function(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 900;
canvas.height = 600;
//繪制矩形
ctx.fillRect(0,0,300,300);
ctx.strokeRect(5,200,200,200);
ctx.clearRect(0,0,100,100);
};
上面代碼先取得canvas對(duì)象上下文，接著繪制了一個(gè)填充矩形和邊框矩形，并清除了一個(gè)矩形區(qū)域。
繪制五角星之前
在這之前，需要分析五角星各個(gè)頂點(diǎn)的位置，以及弧度，由于數(shù)學(xué)水平有限，都怪當(dāng)初不好好學(xué) T.T
star.jpg
- x:cos(18+i*72) * r //確定 x 坐標(biāo)值
- y:-sin(54+i*72) * r //確定 y 坐標(biāo)值
- 角度化 num/180*Math.PI //js將數(shù)值角度化的轉(zhuǎn)換公式
- 400是圓的圓心點(diǎn)，如果不加400，則圓心點(diǎn)為0,0
下面為繪制五角星的函數(shù)，有五個(gè)參數(shù)：ctx:繪圖環(huán)境，R:大圓半徑，x：x坐標(biāo)值， y：y坐標(biāo)值, rot：旋轉(zhuǎn)角度
function drawStar(ctx,R,x,y,rot){
ctx.beginPath();
for (var i = 0; i < 5; i++ ) {
ctx.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R + x,-Math.sin((18+i*72-rot)/180*Math.PI)*R + y);
ctx.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*R/2.4 + x,-Math.sin((54+i*72-rot)/180*Math.PI)*R/2.4 + y);
};
ctx.closePath();
ctx.fill();
}
下面貼上完整代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>canvas</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto">
當(dāng)前瀏覽器不支持cnavas
</canvas>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//繪制中國(guó)國(guó)旗
ctx.fillStyle = "red";
ctx.fillRect(0,0,900,600);
//繪制五角星
//x:cos(18+i*72)*r
//y:-sin(54+i*72)*r
//角度化 num/180*Math.PI
//依次制定大圓和小圓的一個(gè)點(diǎn)
//400是圓的圓心點(diǎn)，如果不加400，則圓心點(diǎn)為0,0
ctx.fillStyle = "yellow";
drawStar(ctx, 60, 120, 160, 0);
var starF = [35, 5, 335, 305];
for (var j = 0; j < starF.length; j++){
var rot = 18 + j * 15;
var x = Math.cos( starF[j]/180 * Math.PI ) * 180 + 120;
var y = -Math.sin( starF[j]/180 * Math.PI ) * 180 + 160;
drawStar(ctx, 60/2.4, x, y, rot);
}
};
function drawStar(ctx,R,x,y,rot){
ctx.beginPath();
for (var i = 0; i < 5; i++ ) {
ctx.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R + x,-Math.sin((18+i*72-rot)/180*Math.PI)*R + y);
ctx.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*R/2.4 + x,-Math.sin((54+i*72-rot)/180*Math.PI)*R/2.4 + y);
};
ctx.closePath();
ctx.fill();
}
</script>
</body>
</html>
最后效果如下：
紅旗.png
