zoukankan      html  css  js  c++  java
  • 关于对canvas.beginPath()的理解

     1 var myCanvas = document.getElementById("myCanvas");
     2 var ctx = myCanvas.getContext("2d");
     3 
     4 ctx.fillStyle = "#e4e4e4";
     5 ctx.fillRect(0, 0, 500, 500);
     6 
     7 ctx.beginPath();
     8 
     9 ctx.moveTo(150, 100);
    10 ctx.lineTo(250, 100);
    11 ctx.strokeStyle = "red";
    12 ctx.stroke();
    13 
    14 ctx.beginPath();
    15 ctx.moveTo(150, 200);
    16 ctx.lineTo(250, 200);
    17 ctx.strokeStyle = "blue";
    18 ctx.stroke();

    今天刚开始学习html5的基本知识,在练习中遇到的问题是beginPath()这个方法的使用,看到这个代码,我们毫无疑问的知道显示出来的分别就是一条红线和一条蓝线,那么假如我把第二个beginPath()注释了,会出现什么情况呢?答案是一条紫线和一条蓝线,这是为什么呢?因为canvas的绘制方法都是从beginPath之后的所有路径开始绘制的,beginPath是开启新的一条路径,一开始是绘制红线(因为存在stroke()这个方法),由于第二次绘制的蓝线没有开启新的路径,所以在原有红线的基础上覆盖多一层蓝线,因此成了紫线;

    那么如果把第一个ctx.stroke()和第二个ctx.beginPath()注释掉的话,结果又会是什么颜色呢?结果是两条蓝线,因为第一个红线并没有绘制(没有stroke()这个方法),所以直接给蓝线覆盖了;
    我的口头表达不是很好,希望大家可以多点尝试,便能总结出规律来哈~
  • 相关阅读:
    生成水印图片
    Java 生成图片-字体杂色去除
    java比较两个日期大小
    JS--添加option
    使用JS刷新showModalDialog窗口
    日期格式转换(String->Date)
    根据当前日期及出生日期,计算当前年龄(function)
    PHP的错误和异常处理
    IntelliJ IDEA15,PhpStorm10,WebStorm11激活破解
    apache相关配置
  • 原文地址:https://www.cnblogs.com/tingting4133/p/3966218.html
Copyright © 2011-2022 走看看