html5之canvas

canvas是html5涌现的新标签,重要用来绘图,瞥见网上能用来完成种种图形,所以觉得很好玩,就进修了一下。
canvas绘制图形有两种要领:

  1. context.fill() //添补

  2. context.stroke() //绘制边框

在绘制图形前要设置好图形款式,也有两种要领:

  1. context.fillStyle() //添补的款式

  2. context.strokeStyle() //边框款式

下面就最先绘制种种图形

  1. 绘制矩形
    context.fillRect(x,y,width,height)
    context.fillRect(x,y,width,height)
    x : 矩形的出发点横坐标
    y : 矩形的出发点纵坐标
    width : 矩形的宽度

function draw(){
        var canvas = document.getElementById('chen'),
            context = canvas.getContext('2d');
            canvas.width = 100;
            canvas.height = 100;
            context.fillStyle = 'red';        //发明要先设置添补色彩
            context.fillRect(0, 0, 100 ,100);
            context.strokeRect(0, 100, 100 ,100);
            
    }
 draw();

  1. context.arc(x,y,radius,starAngle,endAngle, anticlockwose)
    radius : 半径

    原文作者:93回忆录
    原文地址: https://segmentfault.com/a/1190000005874391
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞