资讯专栏INFORMATION COLUMN

Canvas入门-利用Canvas画国旗

keke / 2767人阅读

摘要:举个栗子绘制矩形上面代码先取得对象上下文,接着绘制了一个填充矩形和边框矩形,并清除了一个矩形区域。

在这之前

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

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

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

y:-sin(54+i72)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();
}

下面贴上完整代码:




    
    
    canvas


    
        当前浏览器不支持cnavas        
    


最后效果为:

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/86370.html

相关文章

  • canvas 入门利用 canvas 制作一个七巧板

    摘要:绘制一条从当前位置到指定以及位置的直线。该方法有两个参数以及,代表坐标系中直线结束的点。一个路径,甚至一个子路径,都是闭合的。使用路径绘制图形需要一些额外的步骤。当前浏览器不支持重绘最外层边框一个简单的七巧板就出来啦  简介 是 HTML5 新增的元素之一,它允许脚本语言动态渲染位图像。最初是由 Apple 引入,用于 Mac OS X 的仪表盘,后来又在 Safiri 和 Goog...

    yangrd 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<