Canvas入门－利用Canvas画国旗

在这之前

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

1. beginPath()

2. moveTo()

3. lineTo()

4. closePath()

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

矩形的绘制

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

1. fillRect(x, y, width, height)

绘制一个填充的矩形

1. strokeRect(x, y, width, height)

绘制一个矩形的边框

1. 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

1. x:cos(18+i72)r //确定 x 坐标值

2. y:-sin(54+i72)r //确定 y 坐标值

3. 角度化 num/180*Math.PI //js将数值角度化的转换公式

4. 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     canvas        当前浏览器不支持cnavas        window.onload = function(){    var canvas = document.getElementById("canvas");    var ctx = canvas.getContext("2d");    //绘制中国国旗    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    //依次制定大圆和小圆的一个点    //400是圆的圆心点，如果不加400，则圆心点为0,0    ctx.fillStyle = "yellow";    drawStar(ctx, 60, 120, 160, 0);    var starF = [35, 5, 335, 305];    for (var j = 0; j 

最后效果为：

关键字：html5, JavaScript, canvas

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！