zoukankan      html  css  js  c++  java
  • HTML5 canvas准备知识

      利用canvas来进行画图工作。因此,我们有必要进行一些画图方面的术语说明.

      一、画布

      在日常生活中,如果我们要画画,可以找纸、板、画布等等工具。而在网页元素中,我们只需要定义一个标签即可。

    <canvas id="c" style="border:1px solid black;"><p>your browser is not support.</p></canvas>

      其中,canvas就是一块画布,而标签里面的p,则是为兼容低版本浏览器而使用。如果,你在访问该页面能够看到p标签里面的内容,则说明,你当前使用的浏览器还不支持html5;相反,则是看到矩形。

      使用画布的方法:

    var c = document.getElementById("c");
    

      二、画笔

      在有了画布之后,如果我们想要往其中涂鸦,则需要"画笔"这样的工具。

      利用canvas来获取画笔的方法:

    var ctx = c.getContext("2d");

      其中getContext方法就是用来拿笔的,但这里还有个参数:2d.其为默认传递的参数值。这是什么意思呢?这个可以看作是画笔的种类。

      既然有2d,那么就会有3d了?以后估计会有,但现在没有。所以我们先用这只2d的笔。

      三、橡皮

      在画布,如果发现有些地方的内容需要去除的话,我们可以使用"橡皮"来进行操作。

      利用canvas来使用橡皮的方法:

    ctx.clearRect(X1,Y1,X2,Y2);

      四、坐标 

      2d世界,就是平面,在一个平面上确定一个点,需要两个值,x坐标和y坐标。这是一个很重要的基础概念。

      canvas的原点是左上角,跟网页的定位是一致的。

      五、路径

      利用坐标点,成线。由线成面

  • 相关阅读:
    【特种兵系列】String中的==和equals()
    windows7 x64下maven安装和配置
    微信开发之本地接口调试(非80端口,无需上传服务器服务器访问)
    Java微信公众平台接口封装源码分享
    jdk安装
    用户权限管理
    Linux常用命令(一)
    Xshell显示中文乱码问题
    伪装虽易测试不易之微信浏览器
    每次新建项目出现appcompat_v7 解决方法
  • 原文地址:https://www.cnblogs.com/2801616735kzw/p/3608927.html
Copyright © 2011-2022 走看看