• html5 canvas 设置了宽和高属性依然被拉伸


    一、问题:

    我的项目使用vue.js + element.js,在引入 canvas 时候,通过标签的 width 和  height  属性设置了宽和高,但是显示长度发生变化,渲染也变形。如图所示:

    这是引入的位置, width 和 height 均被绑定在一个配置对象上,

    绑定对象如图所示:

    可见数据已经被设置了,这也是网上大多数博客提供的方法

    然而浏览器重新加载后,被自动拉伸(高度变为父元素 div 的高度)

    左上角显示canvas的宽和高:800*854,854是父元素 div 的高度

    二、解决对策

    这是我瞎试出的结果,如果对你无用的话,请轻喷:)

    使用一个新的父元素 div 包裹 canvas (增加一个容器)

    如图:

    然后重新加载应用,上传图片,效果如下:

    可见 canvas 宽和高设置正常了。但是刚才加上去的容器的宽和高被设置成了800*854.

  • 相关阅读:
    PHP的常用框架有哪些?
    Django中反向生成models
    Django中使用django_debug_toolbar
    Django日志系统
    RESTful接口规范
    Django restframework
    Mysql数据备份与还原
    CORS解决跨域问题
    Linux下Python2升级Python3
    Django+Uwsgi+Nginx部署
  • 原文地址:https://www.cnblogs.com/wangnig/p/9768432.html
Copyright © 2020-2023  润新知