canvas(一)基本用法
【canvas(一)基本用法】是一个可以使用脚本(JavaScript)在其中绘制图形的HTML元素,它可以用于制作照片或者制作简单的动画。
元素
看起来和
元素很相像,唯一的不同就是没有 src 和 alt 属性。
只有两个属性——
width
和height
。默认情况下canvas会初始宽度为300像素和高度为150像素的画板。
给
标签添加 id 属性,方便 js 代码对该 canvas 面板进行操作闭合标签
不能省略内容替换
不同于其他标签,由于某些较老的浏览器不支持该html元素,需要留下替换的信息。只需要在
标签内部提供替换内容,支持
的浏览器将会忽略包含在容器中的内容,并且只是正常的渲染
。
渲染上下文
元素创造了一个固定大小的画布,它公开了一个或者多个渲染上下文,其可以用来绘制和处理要展示的内容。
起初是空白的,为了展示,首先脚本需要找到渲染上下文,然后在它的上面绘制。
元素有一个叫做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....
}
推荐阅读
- 一个人的旅行,三亚
- 一个小故事,我的思考。
- 《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量
- 开学第一天(下)
- 一个人的碎碎念
- 2018年11月19日|2018年11月19日 星期一 亲子日记第144篇
- 遇到一哭二闹三打滚的孩子,怎么办┃山伯教育
- 第326天
- Y房东的后半生14
- 奔向你的城市