canvas新手常见问题

1. 为什么要设置display: block?
图片文字等inline元素默认是和父级元素的baseline对齐的,而baseline又和父级底边有一定距离(这个距离和 font-size,font-family 相关), canvas也是这样,为了避免这个问题,一般将canvas设置为块级元素。

2. 为什么通过css设置了canvas的宽高,还要设置canvas元素的width、height属性?两者有何不同?
css设置canvas的宽高与css设置其他标签作用相同;
设置canvas元素的width、height属性是设置canvas横向、竖向的像素数

例如:
css设置canvas宽高分别为200px和50px
设置canvas元素的width、height属性分别为400和50
我们通过rect方法给整个canvas填满颜色,要用
canvas.getContext('2d').rect(0, 0, 400, 50)
而不是
canvas.getContext('2d').rect(0, 0, 200, 50)
而最终我们在浏览器上看到的,是一个200*50的方块
在线演示

3. 设置canvas元素的width、height属性必须不能带单位
可以设置数字如:200,也可以使用字符串如:‘200’
可以用canvas.clientWidth、canvas.clientHeight获取元素的宽高,
也可提使用{width, height} = canvas.getBoundingClientRect()
这两个方法获取的都是数字,不带单位

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一:canvas简介 1.1什么是canvas? ①:canvas是HTML5提供的一种新标签 ②:HTML5 ...
    GreenHand1阅读 10,186评论 2 32
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,684评论 1 92
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    Looog阅读 9,357评论 3 40
  • 我家老大没上幼儿园,上小学前也没有系统的学过拼音、数字、英文,也没参加过任何兴趣班,早教班。上小学前,都是跟着我在...
    捨不得你去上學阅读 4,741评论 0 3
  • 科学训练有三个最重要的方面:量化、个性化和周期化。量化是其中最主要的,没有量化,个性化和周期化都无从谈起。 量化就...
    kafkaliu阅读 1,170评论 0 1