Canvas學習系列一：初識canvas

最近你開始在學習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>当前浏览器不支持canvas，请更换浏览器</canvas>
<script>var canvas = document.getElementById(&#39;canvas&#39;);var cxt = canvas.getContext(&#39;2d&#39;);
cxt.font = "38px Arial";
cxt.fillStyle = "#427ACC";
cxt.strokeStyle = "#00116A";
cxt.fillText(&#39;Hello Canvas&#39;, canvas.width/2 - 110, canvas.height/2 + 15);
cxt.strokeText(&#39;Hello Canvas&#39;, canvas.width/2 - 110, canvas.height/2 + 15);</script>

 

# 

用CSS去修改canvas元素尺寸大小時的表現

nbsp;html>


    <meta>
    <title>canvas尺寸问题</title>
    <style>#canvas {
            margin: 0 auto;
            padding: 0;
            width: 600px;
            height: 300px;
            border: 1px solid #ccc;
        }</style>


<img  src="/static/imghwm/default1.png" data-src="" class="lazy" alt="Canvas學習系列一：初識canvas" >
<canvas>当前浏览器不支持canvas，请更换浏览器</canvas>
<script>var canvas = document.getElementById(&#39;canvas&#39;);var cxt  = canvas.getContext(&#39;2d&#39;);
    cxt.font = "38px Arial";
    cxt.fillStyle = "#427ACC";
    cxt.strokeStyle = "#00116A";
    cxt.fillText(&#39;Hello World&#39;, canvas.width/2 - 110, canvas.height/2 + 15);
    cxt.strokeText(&#39;Hello World&#39;, canvas.width/2 - 110, canvas.height/2 + 15);</script>

 

#所以我們在設定Canvas元素的大小時，最好不要使用CSS去設置，我們可以這麼去設定

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

或

<script>var canvas = document.getElementById(&#39;canvas&#39;);
canvas.width = &#39;600&#39;; //canvas的属性取值为非负整数，所以不能带有pxcanvas.height = &#39;300&#39;;</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。　

nbsp;html>


    
    
    



<canvas>当前浏览器不支持canvas，请更换浏览器</canvas>
<script>var canvas = document.getElementById(&#39;canvas&#39;);var dataImage = document.getElementById(&#39;dataImage&#39;);
    canvas.width = &#39;600&#39;; //canvas的属性取值为非负整数，所以不能带有pxcanvas.height = &#39;300&#39;;var cxt  = canvas.getContext(&#39;2d&#39;);
    cxt.font = "38px Arial";
    cxt.fillStyle = "#427ACC";
    cxt.strokeStyle = "#00116A";
    cxt.fillText(&#39;Hello World&#39;, canvas.width/2 - 110, canvas.height/2 + 15);
    cxt.strokeText(&#39;Hello World&#39;, canvas.width/2 - 110, canvas.height/2 + 15);var dataUrl = canvas.toDataURL();
    dataImage.src = dataUrl;</script>

 

 

 

toBold():

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

---

 

参考文章：

MDN Web 技术文档

 

以上是Canvas學習系列一：初識canvas的詳細內容。更多資訊請關注PHP中文網其他相關文章！