0
0
零下一度
发布时间：2017-07-23 13:23:42
|3520人浏览过
|来源于php中文网
原创
canvas是html5的新标签，是个可以绘制图形的画布，画布的默认大小为300x150。在自定义绘制画布大小的时候有注意的问题，就是用样式来设置高度和宽度的时候 比如
他等于是把整个画布进行了拉伸，这样绘制出来的图形是模糊的。
可以看到圆的边缘是模糊的，而且变成了椭圆？这是因为画布还是默认的大小宽300px，高150px，但是用style强行把画布拉伸到了1000x600。宽度扩大3.33倍，高度扩大4倍，所以变成了椭圆。宽改为1200就是圆了。
所以不能在样式里面设置大小，应该用canvas自带的width和height属性来设置高度。看下面的代码。注意画圆的参数也改变了
所以设置画布的大小是用canvas自带的width和height属性，才是画布真正的大小，网上有方法可以解决，但是我没去试，因为感觉比较麻烦，还不如直接就是以后就是给固定的大小。有人说这样子自定义怎么办，那简单，套个div然后在js获取宽度或者获取屏幕的宽高然后设置canvas的值就好了。代码如下。
结果和上面的图是一样的，各位可以自己试一下。
相关文章
html5滤镜怎样做故障艺术_html5故障风滤镜实现法【步骤】
html5滤镜怎样模拟景深_html5景深滤镜css技巧【技巧】
html5怎么实现图片噪点去除_html5降噪处理教程【技巧】
html5滤镜怎么加彩虹渐变_html5彩虹滤镜应用教程【技巧】
html5怎么给图片加水印_html5图片水印添加方法【步骤】
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热门AI工具
相关专题
本专题深入讲解 C++ 中的常见设计模式与架构优化，包括单例模式、工厂模式、观察者模式、策略模式、命令模式等，结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析，帮助开发者掌握 如何运用设计模式构建高质量的软件架构，提升系统的灵活性与可扩展性。
14
2026.01.30
热门下载
相关下载
精品课程
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
