Canvas学习系列一：初识canvas

1. canvas介绍

Canvas元素的出现，可以说开启的Web世界绘制动画，图形的大门，其功能非常强大
canvas 元素是HTML5中功能最强大的元素，它的能力主要是通过Canvas中的Context（绘图上下文/绘图环境）对象表现出来的。该对象从canvas本身获取。

VAR canvas = getElementById('canvas');
    var context = canvas.getContext('2d');
    

2. canvas的后备内容

Canvas元素之间包含的文本，这种文本称为 "后备内容"，只有在浏览器不支持canvas元素时才会显示该文本内容

canvas>
    当前浏览器不支持canvas元素，请更换浏览器/canvas>
    

3. Canvas的尺寸

canvas元素时默认宽为300px、高为150px。

我们可以通过canvas的width，height属性去修改canvas的大小，我们也可通过CSS去修改canvas元素的大小。但是二者的修改是有区别的。

canvas实际上有两套尺寸：

一个是canvas元素的大小，一个是canvas绘图表面的大小。

当我们用canvas的属性width，height时实际上我们同时修改了元素的大小与绘图表面的大小

当我们用CSS来设定时，是会修改canvas元素的大小，不会影响绘图表面的大小，这时浏览器就会对绘图表面缩放，会出现我们不想得到的效果

width与height属性修改canvas尺寸大小时的表现

canvas id="canvas" width="600" height="300">
    当前浏览器不支持canvas，请更换浏览器/canvas>
    script tyPE="text/javascript">
    var canvas = document.getElementById('canvas');
    var cxt = canvas.getContext('2d');
    cxt.font = "38px Arial";
    cxt.fillStyle = "#427ACC";
    cxt.strokeStyle = "#00116A";
    cxt.fillText('Hello Canvas', canvas.width/2 - 110, canvas.height/2 + 15);
    cxt.strokeText('Hello Canvas', canvas.width/2 - 110, canvas.height/2 + 15);
    /script>
    

用CSS去修改canvas元素尺寸大小时的表现

!DOCTYPE html>
    html lang="en">
    head>
        meta charset="UTF-8">
        tITle>
    canvas尺寸问题/title>
        style>
#canvas {
                margin: 0 auto;
                padding: 0;
                width: 600px;
                height: 300px;
                border: 1px solid #ccc;
        }
    /style>
    /head>
    body>
    img src="" alt="" id="dataimage">
    canvas id="canvas">
    当前浏览器不支持canvas，请更换浏览器/canvas>
    script type="text/javascript">
    var canvas = document.getElementById('canvas');
    var cxt  = canvas.getContext('2d');
        cxt.font = "38px Arial";
        cxt.fillStyle = "#427ACC";
        cxt.strokeStyle = "#00116A";
        cxt.fillText('Hello World', canvas.width/2 - 110, canvas.height/2 + 15);
        cxt.strokeText('Hello World', canvas.width/2 - 110, canvas.height/2 + 15);
    /script>
    /body>
    /html>
    

所以我们在设置Canvas元素的大小时，最好不要使用CSS去设置，我们可以这么去设置

canvas id="canvas" width="600" height="300">
    当前浏览器不支持canvas，请更换浏览器/canvas>
    

或者

script type="text/javascript">
    var canvas = document.getElementById('canvas');
    canvas.width = '600';
     //canvas的属性取值为非负整数，所以不能带有pxcanvas.height = '300';
    /script>
    

4. canvas API

canvas元素并未提供很多API，它只提供了两个属性三个方法，而绘图功能的方法与属性全都是canvas的绘图环境（context）对象提供。

1. width：设置/获取canvas元素绘图表面的宽度，默认值为300。

2. height：设置/获取canvas元素绘图表面的高度，默认值为150。

3. getContext(): 返回canvas元素的绘图环境对象。

4. toDataURL(): 描述：返回一个data URI：会根据type指定的参数形式将canvas中的图片编码成一个UTF-16字符串的形式。

5. toBold(): 描述：创建Blob对象，用以展示canvas上的图片；这个图片文件可以被缓存或保存到本地，由User Agent( 用户代理端 )自行决定。

toDataURL():

　 type 可选参数

　　图片格式，默认为 image/png

　　encoderOptions 可选参数

　　当图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。

　　如果超出取值范围，将会使用默认值 0.92，默认分辨率为96dpi。

　　 这里值得注意：

• 如果canvas的高度或者宽度为0时，会返回字符串 "data:,"

• 如果传入的类型不是 "image/png", 但是返回的值以 "data: image/png"开头，说明传入的类型不支持

• Chrome支持“image/webp”类型

　　尽管在默认情况下canvas对象是一副位图，但是并不是HTML中的img元素，所以我们可以利用toDataURL方法创建一幅表示canvas的图像; 也可以利用此方法创建和操作缓冲canvas。　

!DOCTYPE html>
    html lang="en">
    head>
        meta charset="UTF-8">
        title>
    canvas尺寸问题/title>
        style>
#canvas {
                margin: 0 auto;
                padding: 0;
                display: none;
        }
    /style>
    /head>
    body>
    img src="" alt="" id="dataImage">
    canvas id="canvas">
    当前浏览器不支持canvas，请更换浏览器/canvas>
    script type="text/javascript">
    var canvas = document.getElementById('canvas');
    var dataImage = document.getElementById('dataImage');
        canvas.width = '600';
     //canvas的属性取值为非负整数，所以不能带有pxcanvas.height = '300';
    var cxt  = canvas.getContext('2d');
        cxt.font = "38px Arial";
        cxt.fillStyle = "#427ACC";
        cxt.strokeStyle = "#00116A";
        cxt.fillText('Hello World', canvas.width/2 - 110, canvas.height/2 + 15);
        cxt.strokeText('Hello World', canvas.width/2 - 110, canvas.height/2 + 15);
    var dataUrl = canvas.toDataURL();
        dataImage.src = dataUrl;
    /script>
    /body>
    /html>
    

toBold():

目前该方法只有Firefox与IE10浏览器支持

参考文章：

MDN Web 技术文档

以上就是Canvas学习系列一：初识canvas的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！