zoukankan      html  css  js  c++  java
  • html5 canvas画布尺寸与显示尺寸

    我在用canvas制作画板时,遇到了绘图位置和鼠标位置不一致的问题,所以今天查阅了一下资料,解决了这个问题。

    canvas绘图原理

    在Canvas元素的内部存在一个名为2d渲染环境(2d redering context)的对象,canvas可以看成在页面上的一张图片

    使用css对cnavas设置宽高

    如果你采用直接设置css样式的方式对canvas设置宽高,就相当于在对一张图形进行放大或缩小,图形就会变形。

    当然,你也可以利用这种变形来达到一些效果,比如把圆变成椭圆。

    使用js或在标签里直接设置宽高

    <canvas id="canvas" width="500" height="400" >
    

    或者

    canvas.width = 500;
    canvas.height = 400;
    

    用这种方法设置宽高,不会导致图形变形,也可以解决我之前遇到的鼠标和绘图起点不一致的问题。

  • 相关阅读:
    结构与联合
    信号与槽知识点
    函数
    元对象编译器moc
    堆与栈
    More Effective C++ (虚拟构造函数)
    重载 覆盖 隐藏
    继承专题
    PowerDesigner 的常用方法(转)
    搜狗输入法导入Google词库bug
  • 原文地址:https://www.cnblogs.com/huyuzhu/p/6600617.html
Copyright © 2011-2022 走看看