《canvas》之第1章 canvas概述

第1章 canvas概述

第1章 canvas概述

1.1 canvas是什么

1.1.1 canvas简介

canvas（画布），html5中，canvas元素结合JavaScript绘制各种图形。

绘制图形(矩形、曲线、圆等)
绘制图表
动画效果
游戏开发

1.1.2 canvas与SVG

canvas使用JavaScript动态生成，SVG使用XML静态描述。
canvas基于位图，适用于像素和动态渲染，放大会失真；SVG基于矢量，适用静态描述，放大不会失真。
发生修改，canvas需要重绘，SVG不需要。
类似美术与几何的关系。

1.2 canvas元素

htaml5中使用canvas元素绘制图形三步骤：

获取canvas对象。
获取上下文环境对象context。
开始绘制图形。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>
    <script type="text/javascript">
        window.onload = function () {
            //1、获取canvas对象
            var cnv = document.getElementById("canvas");
            //2、获取上下文环境对象context
            var cxt = cnv.getContext("2d");
            //3、开始绘制图形
            cxt.moveTo(50, 100);
            cxt.lineTo(150, 50);
            cxt.stroke();
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

1.2.1 canvas元素简介

行内块元素（inline-block），一般需指定3个属性，id、width（默认300px）和height（默认150px）。
实际开发中，width和height应该在HTML属性中定义，不要在CSS样式中定义。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>
    <style type="text/css">
        canvas {
            width: 200px;
            height: 150px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var cnv = document.getElementById("canvas");
            var str = "canvas的宽度为：" + cnv.width + "，高度为：" + cnv.height;
            alert(str); //无法获取CSS中width和height，使用默认值300，150。
        }
    </script>
</head>
<body>
    <canvas id="canvas" style="border:1px dashed gray;"></canvas>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

1.2.2 canvas对象

常用属性
width、height
常用方法
getContext(“2d”)，获取Canvas 2D上下文环境对象（context对象）
toDataURL()，获取canvas对象产生的位图的字符串

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8"/>
    <script type="text/javascript">
        window.onload = function () {
            var cnv = document.getElementById("canvas");
            var str = "Canvas的宽度为：" + cnv.width + "，高度为：" + cnv.height;
            alert(str);
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="160" style="border:1px dashed gray"></canvas>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

解惑

html5 canvas暂时只提供2D绘图API，3D绘图使用html5中WebGL实现。
IE9及以上版本支持html5 canvas，IE7及IE8兼容性通过explorercanvas扩展解决，会有许多功能限制，无无法使用fillText()方法等。

<!--[if IE]>
	<script src="https://github.com/arv/explorercanvas/excanvas.js"></script>
<![end if]-->
1
2
3

推荐canvas教程。
W3C官网：www.w3.org/TR/2dcontext/

相关阅读:
Java配置38-配置Nexus
(标签-前端|关键词-前端页面)
Git & GitHub VSCode 简单使用
LeetCode笔记：Weekly Contest 312
asp毕业设计——基于asp+access的中学网站设计与实现（毕业论文+程序源码）——中学网站
jar包的一些事儿
SpringBoot整合Junit
vue3实现一个滚动分页加载瀑布流列表
C++ NULL 与nullptr 区别
C++深入学习part_1

原文地址：https://blog.csdn.net/oqqyx1234567/article/details/125249412