Maison > Article > interface Web > Série d'apprentissage Canvas 1 : Première introduction à Canvas

Série d'apprentissage Canvas 1 : Première introduction à Canvas

巴扎黑original: 2017-06-23 14:50:411666parcourir

Récemment, vous avez commencé à apprendre le canevas, et je prévois d'enregistrer quelques notes et résumés de l'ensemble du processus d'apprentissage du canevas. S'il y a des lacunes, veuillez les signaler.

1. Introduction au canevas

L'émergence de l'élément Canvas peut être dite. pour ouvrir l'animation de dessin du Web World, la porte du graphisme, sa fonction est très puissante
L'élément canevas est l'élément le plus puissant en HTML5, et ses capacités passent principalement par le Context (contexte de dessin/ environnement de dessin) dans Canvas affiché par l'objet. Cet objet est obtenu à partir de la toile elle-même.

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

2. Sauvegarder le contenu de la toile

Texte contenu entre les éléments Canvas, ce texte est appelé "contenu de sauvegarde", qui ne sera affiché que lorsque le navigateur ne prend pas en charge l'élément canvas

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

3. Taille du canevas

La largeur par défaut de l'élément canevas est de 300 px et la hauteur est de 150 px.

Nous pouvons modifier la taille du canevas via les attributs de largeur et de hauteur du canevas. Nous pouvons également modifier la taille de l'élément canevas via CSS. Mais il y a une différence entre les deux modifications.

Canvas a en fait deux ensembles de tailles :

L'un est la taille de l'élément de toile et l'autre est la taille de la toile. surface de dessin.

Lorsque nous utilisons les attributs du canevas width et height, nous modifions en fait la taille de l'élément et la taille de la surface de dessin en même temps

Lorsque nous paramétrons avec CSS, la taille de l'élément de canevas sera modifiée, ce qui n'affectera pas la taille de la surface de dessin. À ce moment, le navigateur mettra à l'échelle la surface de dessin, ce qui produira des effets que nous n'avons pas. souhaitez obtenir

Les performances des attributs de largeur et de hauteur lors de la modification de la taille du canevas

<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>

Performances lors de l'utilisation de CSS pour modifier la taille des éléments du canevas

<!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>

Ainsi, lorsque nous définissons la taille de l'élément Canvas, il est préférable de ne pas utiliser CSS pour la définir. On peut le régler comme ça

<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 技术文档

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Modèle de boîte flexible : Cognition et utilisation de la boîte flexibleArticle suivant：Modèle de boîte flexible : Cognition et utilisation de la boîte flexible

Articles Liés

Voir plus