Canvas入门－利用canvas画国旗

在这之前

需要你懂得以下方法的使用：

• beginPath()
• moveTo()
• lineTo()
• closePath()

具体用法可以参考我的上一篇文章 canvas入门－利用canvas制作一个七巧板

矩形的绘制

canvas提供了三种绘制矩形的方法：

• fillRect(x, y, width, height)
  绘制一个填充的矩形
• strokeRect(x, y, width, height)
  绘制一个矩形的边框
• clearRect(x, y, width, height)
  清除制定矩形区域啊

上面方法的参数里 x 和 y 分别为相对于canvas原点的坐标，width 和 height 设置了矩形的尺寸。
举个栗子：

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对象上下文，接着绘制了一个填充矩形和边框矩形，并清除了一个矩形区域。

绘制五角星之前

在这之前，需要分析五角星各个顶点的位置，以及弧度，由于数学水平有限，都怪当初不好好学 T.T

star.jpg

• x:cos(18+i*72) * r //确定 x 坐标值
• y:-sin(54+i*72) * r //确定 y 坐标值
• 角度化 num/180*Math.PI //js将数值角度化的转换公式
• 400是圆的圆心点，如果不加400，则圆心点为0,0

下面为绘制五角星的函数，有五个参数：ctx:绘图环境，R:大圆半径，x：x坐标值， y：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();
}

下面贴上完整代码：

    
    
    


    
        当前浏览器不支持cnavas      
    

最后效果如下：

红旗.png