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

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部