《canvas》之第1章 canvas概述

mali378287007

已于 2023-12-12 16:40:31 修改

阅读量136

点赞数

分类专栏：学习整理 canvas 文章标签：前端 canvas

于 2022-06-22 12:00:00 首次发布

本文链接：https://blog.csdn.net/oqqyx1234567/article/details/125249412

版权

整理同时被 3 个专栏收录

181 篇文章 11 订阅

订阅专栏

学习

130 篇文章 4 订阅

订阅专栏

canvas

20 篇文章 4 订阅

订阅专栏

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

解惑

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

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

mali378287007

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
《canvas》之第1章 canvas概述

canvas概述
复制链接

扫一扫

专栏目录