canvas(一)基本用法

【canvas(一)基本用法】是一个可以使用脚本(JavaScript)在其中绘制图形的HTML元素,它可以用于制作照片或者制作简单的动画。
元素 看起来和元素很相像,唯一的不同就是没有 src 和 alt 属性。只有两个属性——widthheight。默认情况下canvas会初始宽度为300像素和高度为150像素的画板。


标签添加 id 属性,方便 js 代码对该 canvas 面板进行操作
闭合标签 不能省略
内容替换 不同于其他标签,由于某些较老的浏览器不支持该html元素,需要留下替换的信息。
只需要在标签内部提供替换内容,支持的浏览器将会忽略包含在容器中的内容,并且只是正常的渲染
current stock price:$$$$

渲染上下文 元素创造了一个固定大小的画布,它公开了一个或者多个渲染上下文,其可以用来绘制和处理要展示的内容。
起初是空白的,为了展示,首先脚本需要找到渲染上下文,然后在它的上面绘制。元素有一个叫做getContext()的方法,这个方法是用来获取渲染上下文和它的绘画功能。getContext()只有一个参数,上下文的格式。
let canvas = document.getElementById('canvas') let ctx = canvas.getContext('2d')

检查支持性 替换内容是用在不支持标签的浏览器中展示的。通过简单的测试 getContext() 方法是否存在,脚本可以检查编程支持性。
let canvas = document.getElementById('canvas') if(canvas.getContext()){ let ctx = canvas.getContext() //code.... }

    推荐阅读