zoukankan      html  css  js  c++  java
  • canvas drawimage绘制图像出错(默认canvas300*150)解决办法

    今天在开发中,再一次踩了以前踩过的坑,写完程序在这里写一下,分享给大家也避免再次遇坑。

    //默认的canvas
    <canvas id ="canvas"></canvas>
    

     此时,他的宽高是默认的300*150

    如果这样声明:

      <canvas id ="canvas" style="500px;height:300px"></canvas>
    

     按理说,宽高应该是500/300,但是获取到的宽高是 300*150。

       我通过js设置的$("#canvas").get(0).style.width,自适应屏幕宽高,也是上述情况。

       像这种类似的在style里设置宽高,都会造成与实际不符。所以要避免这种赋值方法。

       正确书写方法:

       

    Canvas元素默认宽 300px, 高 150px, 设置其宽高使用如下方法:
    方法一:
    1 <canvas width="500" height="500"$amp;>amp;$lt;/canvas>
    方法二:使用HTML5 Canvas API操作 1 var canvas = document.getElementById('欲操作canvas的id'); 2 canvas.width = 500; 3 canvas.width = 500; 若通过如下方法设置宽高,那么canvas宽高还是300*150: 错误方法一:使用CSS 会被拉伸 1 #canvas{ 2 1000px; 3 height:1000px; 4 } 也包含了行间样式中的 style="" 。也就是上面的例子。
    错误方法二:使用HTML5 Canvas API操作 1 var canvas = document.getElementById('canvas的id'); 2 canvas.style.width = "1000px"; 3 canvas.style.height = "1000px";
    错误方法三 :用jquery的$("#id").get(0).style.width();

      

      

      

      

  • 相关阅读:
    ocilib(简介2)
    C++ Socket编程步骤 (转载)
    服务端和客户端的疑问
    var和public的区别
    vs2010如何设置能实现输入关键字的时候自动提示呢?
    ocilib(简介)
    iostream.h , iostream
    error C2110: cannot add two pointers
    Array 越界不报错的问题
    char* + int or char or ...
  • 原文地址:https://www.cnblogs.com/fengchaoran/p/8567297.html
Copyright © 2011-2022 走看看