zoukankan      html  css  js  c++  java
  • HTML5 Canvas(1) 绘制基本图形和线条

            window.onload = function () {
                //得到2D渲染上下文
                var context = document.getElementById("myCanvas").getContext("2d");
                //填充一个矩形
                var x = 40, y = 40;
                context.fillStyle = "blue"; //设置填充色
                context.fillRect(x + 5, y + 5, 40, 90);
    
                //绘制一个矩形边框
                context.strokeStyle = "red"; //设置画笔色
                context.strokeRect(x, y, 50, 100);
    
    
                context.beginPath(); //beginPath1
                context.moveTo(10, 10);
                context.lineTo(150, 50);
                context.lineTo(140, 33);
                context.strokeStyle = "green";
                context.stroke();
    
                context.beginPath(); //beginPath2
                context.moveTo(22, 22);
                context.lineTo(10, 50);
                context.lineTo(30, 100);
                context.closePath(); //closePath可以让线条闭合
             context.strokeStyle = "#0000FF";
    
                context.fill();//填充线条轮廓区域
    
            };

    beginPath的作用是开辟新的绘图路径,不会影响其他路径,如把beginPath2注释掉后,运行会出现2个封闭被#0000FF填充的三角形,即使在beginPath1中使用stroke画出了线条,也会被重绘。

    所以一般要画和之前的线条不一样的设置时首先要用beginPath开辟新绘图路径再继续画,才不会影响先前的绘图

  • 相关阅读:
    luogu P1382 楼房
    luogu P1908 逆序对
    5.28 模拟赛
    POJ 2991 Crane
    残(矩阵快速幂)
    AC日记——拍照 洛谷 P3410
    AC日记——[CQOI2014]危桥 洛谷 P3163
    AC日记——【模板】二分图匹配 洛谷 P3386
    AC日记——[ZJOI2009]假期的宿舍 cogs 1333
    AC日记——城市 洛谷 P1401
  • 原文地址:https://www.cnblogs.com/FlyCat/p/2579262.html
Copyright © 2011-2022 走看看