캔버스 학습 시리즈 1: 캔버스에 대한 첫 소개
- 巴扎黑원래의
- 2017-06-23 14:50:411621검색
최근 캔버스 학습을 시작하셨는데, 캔버스 학습 과정 전반에 대한 메모와 요약을 기록하실 예정이시라면 부족한 점을 지적해주세요.
1. 캔버스 소개
캔버스 요소의 출현은 웹 세계에서 애니메이션과 그래픽을 그릴 수 있는 문을 열었다고 할 수 있습니다.
캔버스. 요소는 HTML5 요소의 가장 강력한 기능이며 그 기능은 주로 Canvas의 Context(그리기 컨텍스트/그리기 환경) 개체를 통해 표현됩니다. 이 개체는 캔버스 자체에서 가져옵니다.
var canvas = getElementById('canvas');var context = canvas.getContext('2d');2. 캔버스의 백업 콘텐츠
캔버스 요소 사이에 포함된 텍스트를 "지원 콘텐츠"라고 하며 브라우저가 캔버스 요소를 지원하지 않는 경우에만 발생합니다. . 텍스트 콘텐츠를 표시합니다.
<canvas>当前浏览器不支持canvas元素，请更换浏览器</canvas>
3. 캔버스의 크기
캔버스 요소의 기본 너비는 300px이고 높이는 150px입니다.
캔버스의 너비 및 높이 속성을 통해 캔버스의 크기를 수정할 수 있으며 CSS를 통해 캔버스 요소의 크기도 수정할 수 있습니다. 그러나 두 가지 수정 사항에는 차이가 있습니다.
캔버스에는 실제로 두 가지 크기 세트가 있습니다.
하나는 캔버스 요소의 크기이고 다른 하나는 캔버스 그리기 표면의 크기입니다.
캔버스 속성인 너비와 높이를 사용하면 실제로 요소의 크기와 그리기 화면의 크기가 동시에 수정됩니다.
CSS를 사용하여 설정하면 캔버스의 크기 요소가 수정됩니다. 아니요 이 때 브라우저는 그리기 표면의 크기를 조정하므로 원하지 않는 효과가 발생합니다
width 및 height 속성은 캔버스 크기를 수정합니다
<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를 사용하여 캔버스 요소의 크기를 수정할 때의 성능
<!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 技术文档
위 내용은 캔버스 학습 시리즈 1: 캔버스에 대한 첫 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!