目录

canvas 简介

Canvas基本使用

canvas元素

渲染上下文(Thre Rending Context)

代码模板

canvas 简介

• Canvas 中文名叫 “画布”，是 HTML5 新增的一个标签。

• Canvas 允许开发者通过 JS在这个标签上绘制各种图案。

• Canvas 拥有多种绘制路径、矩形、圆形、字符以及图片的方法。

• Canvas 在某些情况下可以 “代替” 图片。

• Canvas 可用于动画、游戏、数据可视化、图片编辑器、实时视频处理等地方。

<canvas> 是 HTML5 新增的，一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。

Canvas 是由 HTML 代码配合高度和宽度属性而定义出的可绘制区域。JavaScript 代码可以访问该区域，类似于其他通用的二维 API，通过一套完整的绘图函数来动态生成图形。

Canvas基本使用

<canvas id="tutorial" width="300" height="300"></canvas>

canvas元素

如果不给 <canvas> 设置 widht、height 属性时，则默认 width为300、height 为 150，单位都是 px。也可以使用 css 属性来设置宽高，但是如宽高属性和初始比例不一致，他会出现扭曲。所以，建议永远不要使用 css 属性来设置 <canvas> 的宽高。

渲染上下文(Thre Rending Context)

<canvas> 会创建一个固定大小的画布，会公开一个或多个渲染上下文(画笔)，使用渲染上下文来绘制和处理要展示的内容。

代码模板

<canvas id="tutorial" width="300" height="300"></canvas> 
<script type="text/javascript">function draw(){    var canvas = document.getElementById('tutorial');    if(!canvas.getContext) return;      var ctx = canvas.getContext("2d");//开始代码     } draw(); 
</script>