html5基础入门教程学习之canvas基本用法

canvas基本用法

canvas标签是html5中的新标签。而canvas对象表示一个html画布元素，它支持脚本客户端绘图操作。

接下来，我们就canvas的基本用法做下简单的介绍。

定义canvas元素

canvas只有两个属性（当然不包括id属性，id属性是任何html元素都有的），即width和height。这两个属性都是可选的。默认值是宽300px，高150px。在这边，有一点需要注意，虽然可以通过css来调整canvas的大小，但渲染图像会缩放来适应布局，如果发现渲染结果看上去变形了，那可以显示的指定canvas的width属性和height属性。像上面那样。

canvas元素可以像普通图片那样为其指定样式，这些样式不会对canvas实际生产的图片产生什么影响。如果不指定样式，canvas默认是全透明的。

替用内容

由于canvas标签是html5中的新标签，并不是所有浏览器都支持。所以通常我们需要为那些不支持canvas的浏览器提供替用的显示内容。

我们只需要直接在canvas标签中插入内容即可。不支持该标签的浏览器会自动忽略而直接渲染替用内容；而支持的浏览器则会正常的渲染canvas。

例如，我们可以把一些文字或图片填入canvas内，作为替用内容：

注意：结束标签是必须