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 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）对象提供。
width：设置/获取canvas元素绘图表面的宽度，默认值为300。
height：设置/获取canvas元素绘图表面的高度，默认值为150。
getContext(): 返回canvas元素的绘图环境对象。
toDataURL(): 描述：返回一个data URI：会根据type指定的参数形式将canvas中的图片编码成一个UTF-16字符串的形式。
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的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
小米 15 系列全代號曝光：Dada、Haotian、Xuanyuan
Aug 22, 2024 pm 06:47 PM
小米15系列預計10月正式發布，其全系列代號已在外媒MiCode程式碼庫曝光。其中，旗艦級小米15Ultra代號為"Xuanyuan"（意為"軒轅"），此名源自中國神話中的黃帝，象徵尊貴。小米15的代號為"Dada"，而小米15Pro則以"Haotian"（意為"昊天"）為名。小米15SPro內部代號為"dijun"，暗指《山海經》創世神帝俊。小米15Ultra系列涵蓋
揭秘C語言的吸引力: 發掘程式設計師的潛質
Feb 24, 2024 pm 11:21 PM
學習C語言的魅力：解鎖程式設計師的潛力隨著科技的不斷發展，電腦程式設計已經成為了一個備受關注的領域。在眾多程式語言中，C語言一直以來都備受程式設計師的喜愛。它的簡單、高效以及廣泛應用的特點，使得學習C語言成為了許多人進入程式設計領域的第一步。本文將討論學習C語言的魅力，以及如何透過學習C語言來解鎖程式設計師的潛力。首先，學習C語言的魅力在於其簡潔性。相較於其他程式語言而言，C語
Pygame入門指南：全面安裝與設定教學課程
Feb 19, 2024 pm 10:10 PM
從零開始學習Pygame：完整的安裝和配置教程，需要具體程式碼範例引言：Pygame是一個使用Python程式語言開發的開源遊戲開發庫，它提供了豐富的功能和工具，使得開發者可以輕鬆創建各種類型的遊戲。本文將帶您從零開始學習Pygame，並提供完整的安裝和配置教程，以及具體的程式碼範例，讓您快速入門。第一部分：安裝Python和Pygame首先，確保您的電腦上已
華為 Mate 60 系列最佳入手時機，新增 AI 消除 + 影像升級，更可享秋日禮遇活動
Aug 29, 2024 pm 03:33 PM
自去年华为Mate60系列开售以来，我个人就一直将Mate60Pro作为主力机使用。在将近一年的时间里，华为Mate60Pro经过多次OTA升级，综合体验有了显著提升，给人一种常用常新的感觉。比如近期，华为Mate60系列就再度迎来了影像功能的重磅升级。首先是新增AI消除功能，可以智能消除路人、杂物并对空白部分进行自动补充；其次是主摄色准、长焦清晰度均有明显升级。考虑到现在是开学季，华为Mate60系列还推出了秋日礼遇活动：购机可享至高800元优惠，入手价低至4999元。常用常新的产品力加上超值
一起學習word根號輸入方法
Mar 19, 2024 pm 08:52 PM
在word編輯文字內容時，有時會需要輸入公式符號。有的小夥子們不知道在word根號輸入的方法，小面就讓小編跟小夥伴們一起分享下word根號輸入的方法教學。希望對小夥伴們有幫助。首先，開啟電腦上的Word軟體，然後開啟要編輯的文件，並將遊標移到需要插入根號的位置，參考下方的圖片範例。 2.選擇【插入】，再選擇符號裡的【公式】。如下方圖片紅色圈的部分內容所示：3.接著選擇下方的【插入新公式】。如下方圖片紅色圈的部分內容所示：4.選擇【根式】，再選擇適當的根號。如下方圖片紅色圈的部分內容所示：
學習canvas框架 詳解常用的canvas框架
Jan 17, 2024 am 11:03 AM
探索Canvas框架：了解常用的Canvas框架有哪些，需要具體程式碼範例引言：Canvas是HTML5中提供的一個繪圖API，透過它我們可以實現豐富的圖形和動畫效果。為了提高繪圖的效率和便利性，許多開發者開發了不同的Canvas框架。本文將介紹一些常用的Canvas框架，並提供具體程式碼範例，以幫助讀者更深入地了解這些框架的使用方法。一、EaselJS框架Ea
從零開始學習Go語言中的main函數
Mar 27, 2024 pm 05:03 PM
標題：從零開始學習Go語言中的main函數Go語言作為一種簡潔、高效的程式語言，備受開發者青睞。在Go語言中，main函數是一個入口函數，每個Go程式都必須包含main函數作為程式的入口點。本文將從零開始介紹如何學習Go語言中的main函數，並提供具體的程式碼範例。一、首先，我們需要安裝Go語言的開發環境。可前往官方網站（https://golang.org
探索canvas在遊戲開發中的強大作用及應用
Jan 17, 2024 am 11:00 AM
了解canvas在遊戲開發中的威力與應用概述：隨著網路科技的快速發展，網頁遊戲越來越受到廣大玩家的喜愛。而作為網頁遊戲開發中重要的一環，canvas技術在遊戲開發中逐漸嶄露頭角，展現出強大的威力與應用。本文將介紹canvas在遊戲開發中的潛力，並透過具體的程式碼範例來展示其應用。一、canvas技術簡介canvas是HTML5中新增的元素，它允許我們使用
