美文网首页Canvas学习笔记
Canvas学习笔记--绘制矩形

Canvas学习笔记--绘制矩形

作者: 小人物的秘密花园 | 来源:发表于2018-06-26 16:10 被阅读0次

    参考

    使用canvas来绘制图形

    知识点

    不同于SVG,HTML中的元素canvas只支持一种原生的图形绘制:矩形。所有其他的图形的绘制都至少需要生成一条路径

    绘制矩形的方法

    绘制填充的矩形

    fillRect(x, y, width, height);
    

    绘制一个矩形的边框

    strokeRect(x,y,width,height);
    

    清除指定矩形区域,让清除部分完全透明

    clearRect(x,y,width,height);
    

    参数说明:

    x:绘制图形左上角(起点)的横坐标;
    y:绘制图形左上角(起点)的纵坐标;
    width:绘制图形的宽;
    height:绘制图形的高;

    案例

    window.onload = function() {
        draw();
    }
    
    function draw() {
        var canvas = document.getElementById('canvas1');
        if (canvas.getContext) {
            var oContext = canvas.getContext('2d');
            // 绘制一个尺寸是200px*200px的矩形
            oContext.fillRect(50, 50, 200, 200);
            // 擦除一个尺寸是180*180的矩形
            oContext.clearRect(60, 60, 180, 180);
            // 在擦除区域生成一个尺寸是140*140的边框
            oContext.strokeRect(80, 80, 140, 140);
    
        }
    }
    
    结果.png

    注意:这三个方法绘制后会马上显示在画布上,即是实时显示的;

    相关文章

      网友评论

        本文标题:Canvas学习笔记--绘制矩形

        本文链接:https://www.haomeiwen.com/subject/ldlmyftx.html