Canvas设置宽高 绘图拉伸

时间:2023-02-09 14:10:36

每一届换任领导都要搞出一大堆的事情,首先会批判公司上届领导的产品规划的垃圾,然后再推翻垃圾换个模式以他所谓的新颖的超前的认知重新再来。新来的技术总监又搞出这一出,移动端由原生态完全转成H5,应公司的要求从Android开发转到Html5,没办法,要么忍要么滚,也快到年根儿了,静下心来好好学H5吧。从无到有的过程是相当的痛苦的,首先要面对的是从一个熟悉的领域快速步入到一个新的领域的跨度转变有点儿猝不及防,然后就是面对痛苦的学习过程。刚开始遇到的问题一堆一堆的,不过都解决的差不多了,很简单,但都没有记录,这次遇到的问题奇葩问题困扰了我俩小时一定要记录下来这个傻逼的俩小时。

问题是这样的,我在联系canvas的时候想通过canvas绘制出夜空满天星星的效果,一开始是顺利的,按照W3school.com.cn的文档,找到相应的API然后基本上是完全给塞进页面去了,但是问题来了,当我把星星图片绘制上去的时候出现了拉伸,拉的很长,如下图,怎么调都调不过来,恼火的头发都掉了。Canvas设置宽高   绘图拉伸

各种试,利用jQuery设置,利用其他框架试都是不行,各种查看W3school.com.cn文档,就是没用,哎,没办法了只有求助Baidu了,百完度终于知道是怎么回事儿了,原来canvas元素是有默认宽高的,宽300px,高150px,我通过CSS样式设置宽高为1:1(宽高均为500px),这样做是不行的,只能通过在标签上设置宽高,这样一个小的简单的问题就这么给解决了,感谢Baidu诸君。

效果如下,录屏软件没把鼠标给录进去

Canvas设置宽高   绘图拉伸