本篇内容主要讲解“html5中的canvas是什么”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“html5中的canvas是什么”吧!
canvas是HTML5提供的一个用于展示绘图效果的标签，“<canvas>”标签提供了一个空白的图形区域（矩形区域的画布），需要使用特定的JavaScript API来绘画图形。
本教程操作环境：windows7系统、HTML5版、Dell G3电脑。
1、什么是Canvas
canvas 是 HTML5 提供的一个用于展示绘图效果的标签
canvas 提供了一个空白的图形区域，可以使用特定的JavaScript API来绘画图形（canvas 2D或WebGL）
首先由 Apple 引入的，用于OS X的仪表盘 和 Safari 浏览器
1.1 关于Canvas的一些说明
canvas 是一个矩形区域的画布，可以用JavaScript在上面绘画。控制其每一个像素。
canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
1.2 canvas主要应用的领域（了解）
1）、游戏：canvas在基于Web的图像显示方面比Flash更加立体、更加精巧，canvas游戏在流畅度和跨平台方面更牛。
2）、可视化数据（数据图表话），比如: 百度的echart、d3.js、three.js
3）、banner广告：Flash曾经辉煌的时代，智能手机还未曾出现。现在以及未来的智能机时代，HTML5技术能够在banner广告上发挥巨大作用，用Canvas实现动态的广告效果再合适不过。
4）、未来
模拟器：无论从视觉效果还是核心功能方面来说，模拟器产品可以完全由JavaScript来实现。
远程计算机控制：Canvas可以让开发者更好地实现基于Web的数据传输，构建一个完美的可视化控制界面。
图形编辑器：Photoshop图形编辑器将能够100%基于Web实现。
2、Canvas标签介绍
<canvas width="600" height="400"></canvas>作用：展示绘图的内容，但不能进行绘图
2.1 canvas的兼容性
<canvas width="600" height="400">
IE9及其以上版本的浏览器，才支持canvas标签
提示：您的浏览器不支持canvas，请升级浏览器
</canvas>2.2 设置宽高注意点
1）、可以使用 html属性/DOM属性 width 和 height来设置
2）、不要：使用CSS样式来设置宽高
使用 属性设置宽高，实际上相当于增加了 canvas画布的像素
默认宽高： 300*150，表示：水平方向有300个像素，垂直方向有150个像素
使用属性设置宽高，是增加或减少了canvas画布的像素；
而使用css样式，不会增加像素点，只是将每个像素点扩大了！
2.3 绘图
使用JavaScript中提供的绘图API来绘制
每个canvas都有一套绘图的API（工具）
2.3.1 绘图的基本步骤
1）、找到canvas画布
2）、通过canvas拿到绘图上下文（一系列的API集合）
3）、使用API绘制需要的图形
// 1）、找到canvas
var cv = document.getElementById("canvasId");
// 2）、拿到canvas绘图上下文
var ctx = cv.getContext("2d");
// 3）、使用上下文中的API绘制图形
ctx.moveTo(100, 100); // 将画笔移动到 100,100 的位置
ctx.lineTo(200, 100); // 从 100,100 到 200,100 画一条线段
ctx.stroke(); // 描边到此，相信大家对“html5中的canvas是什么”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
