Canvas学习（一）

最新推荐文章于 2022-09-09 17:10:32 发布

52小HH

最新推荐文章于 2022-09-09 17:10:32 发布

阅读量757

点赞数

分类专栏： canvas 文章标签： canvas

本文链接：https://blog.csdn.net/weixin_40613615/article/details/104754993

版权

canvas 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

我在很多企业的招聘需求中看到了canvas这个东西，所以参考《javascript高级程序设计》来学习一下。

什么是Canvas？

canvas元素是html5新增的一个元素，它负责在页面中设定过一个区域，然后在这个区域中，使用javascript动态的绘制图形。Canvas最早由苹果公司推出，自html5加入这个元素，大部分主流浏览器都开始支持它。

Canvas的组成部分

canvas由几组api构成，但并非所有浏览器都支持所有的api，这里主要学习具备基本绘图能力的2D上下文，接下来开始学习。
#Canvas的基本用法

Canvas的基本使用

下面一步一步来进行学习

获取2D上下文对象以及getContext()方法

<html>
    <head>
        <meta charset="utf-8">
        <title>Canvas</title>
    </head>
    <body>
        <!-- Canvas需要width和height属性确定绘图区域的大小，如果浏览器不支持Canvas属性，则会显示标签中的内容，
        这里发现如果在外部样式设置宽高，绘图时宽高会有异常，所以使用内部样式 -->
        <canvas id="drawing" width="200" htight="200">Canvas绘制</canvas>
        <script type="text/javascript">
        // 获取canvas
            var drawing = document.getElementById('drawing');
        // 判断浏览器是否支持canvas元素
            if(drawing.getContext){
                // 获取2d上下文对象
                console.log(drawing.getContext('2d'))
            }
        </script>
    </body>
</html>

这里使用console.log()在浏览器看一下2d上下文对象
在这里插入图片描述
这里解释一下问什么要检测getContext()方法是否存在，在《javascript高级程序设计》中描述：有些浏览器会为HTML规范外的元素创建默认的HTML元素对象。这种情况下，即使元素变量中保存着一个有效的元素引用，也不能检测到getContext()方法，如FireFox3。

toDataURL()

toDataURL()方法可以导出在canvas元素中绘制的图像，这个方法接收一个参数，指定图像的MIME格式，并且适用于建立图像的任何上下文。

if(drawing.getContext){
               // 获取图像数据URI
               var imgURI = drawing.toDataURL("img/png");
               // 显示图像
               var image = document.createElement('img');
               image.src = imgURI;
               document.body.appendChild(image);
           }

在这里插入图片描述
这里的img标签是动态添加的，src属性是toDataURL()方法获取到的数据，默认情况下，浏览器会将图片编码为PNG格式。
才看到书中的一段编者注：toDataURL()这个方法属于是canvas对象的方法，不是2d上下文的方法，这里需要注意记住。

52小HH

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Canvas学习（一）

我在很多企业的招聘需求中看到了canvas这个东西，所以参考《javascript高级程序设计》来学习一下。什么是Canvas？canvas元素是html5新增的一个元素，它负责在页面中设定过一个区域，然后在这个区域中，使用javascript动态的绘制图形。Canvas最早由苹果公司推出，自html5加入这个元素，大部分主流浏览器都开始支持它。Canvas的组成部分canvas由几组ap...
复制链接

扫一扫