首页 前端知识 html5基础入门教程学习之canvas基本用法,应届毕业生硬件工程师面试题

html5基础入门教程学习之canvas基本用法,应届毕业生硬件工程师面试题

2024-06-08 22:06:01 前端知识 前端哥 893 441 我要收藏

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

定义canvas元素

canvas

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

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

替用内容

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

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

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/11581.html
标签
评论
发布的文章

小米商城

2024-06-16 15:06:28

JSON转日期,变为数字串

2024-06-16 09:06:45

使用axios读取本地json文件

2024-06-16 09:06:39

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!