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的原点是左上角,跟网页的定位是一致的。

  五、路径

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

优质内容筛选与推荐>>
1、阿里云 ECS 监控报警设置
2、HTML中常见的各种位置距离以及dom中的坐标讨论
3、Markdown使用笔记
4、MySQL解决8小时内没有进行数据库操作, mysql自动断开连接, 需要重启tomcat的问题
5、碎片化的一天


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号





    联系我们

    欢迎来到TinyMind。

    关于TinyMind的内容或商务合作、网站建议,举报不良信息等均可联系我们。

    TinyMind客服邮箱:support@tinymind.net.cn