html5复习--canvas

2024-08-24 10:16:31

一、简介

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

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

二、<canvas>基本使用

1、元素

<canvas id="myCanvas" width="300" height="300">浏览器不支持则显示此文本</canvas>

需要设置宽高，即width 和height。不设置默认width 300, height 150，单位是px，可以不加单位，只写数字。不要用css设置canvas大小。

2、上下文

canvas是只是一个元素，规定了画布的大小，还可以添加class规定canvas的位置等；本身并没有绘图能力，绘制工作需要JavaScript来完成。

var canvas = document.getElementById('myCanvas');

var ctx = canvas.getContext('2d);

.getContext(contextType)，contextType是上下文类型，2d即2d上下文，有其他值。getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

最新文章

热门文章