zoukankan      html  css  js  c++  java
  • html5之canvas困惑 在canvas标签内需要设置了宽跟高,如果在css中设置同样的宽跟高,画出来的图像变形了?

    <canvas class="cvs"></canvas>

    遇到的问题:

    如css 中设.cvs{500px;height:400px;},也就是css改变了canvas的尺寸后,本来是可以画出一个圆来,现在却是一个扁平的圆,为什么呀?
    如图:


    什么原因:(百度上说的)

    当你在支持html5 canvas的浏览器下查看页面的时候,你会看到一个大小为300px*300px(BTW:canvas默认大小为:300px*150pxcanvas)相当于一张图片,css设置的属性相当于
    对这张图片进行拉伸变化

    要改变canvas的大小,应当用这种方式:
    使用js来改变
    <canvas width=500 height=400></canvas>

    对应的javascript是
    canvas=document.getElementsByTagName('canvas')[0];
    canvas.width=500;
    canvas.height=400;

    换句话说,你现在画出的圆实际显示的是在默认大小上经过拉伸变换的样子。
    自己的理解:

    canvas是一张画布,就像一张图片那样,默认的图片大小事300*150,但是我们在css样式中设置了canvas,就是把图片给拉伸变换了,于是我们不一样的图片。就像我们打开平时一张图片,然后进行拉伸般,于是图片就变形。
    所以,画布的宽跟高,最好还是直接在canvas标签里面设置了,这样一来,就直接改变了默认的画布宽跟高的值。

    【学到新知识时,再过来修改】

  • 相关阅读:
    Springboot启动前执行方法
    UUID
    vue
    前端进阶
    动态代理
    c# 对接微信公众号JSSDK使用wx.uploadImage 上传图片,后台从微信服务器上下载的图片有问题损坏的解决办法
    浏览器数据库 IndexedDB基础使用
    使用Java命令行编译和打包jar
    ArcGIS JS API 路径回放
    基于Quick_SLPK_Server的NodeJs版I3S服务发布
  • 原文地址:https://www.cnblogs.com/wuyinghong/p/3633213.html
Copyright © 2011-2022 走看看