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

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

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

如果这样声明:

  <canvas id ="canvas" style="width: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 width: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();

  

  

canvas drawimage绘制图像出错(默认canvas300*150)解决办法的更多相关文章

  1. WPF 在TextBox失去焦点时检测数据,出错重新获得焦点解决办法

    WPF 在TextBox失去焦点时检测数据,出错重新获得焦点解决办法 在WPF的TextBox的LostFocus事件中直接使用Focus()方法会出现死循环的问题 正确的使用方式有2中方法: 方法一 ...

  2. Advanced Installer 中测试数据库连接提示“未发现数据源名称并且未指定默认驱动程序”的解决办法

    原文:Advanced Installer 中测试数据库连接提示"未发现数据源名称并且未指定默认驱动程序"的解决办法 最近需要制作一个安装包,安装包的要求如下: 1.用户手工填写M ...

  3. 记CRenderTarget:DrawText()绘制中文乱码的BUG及解决办法

    原文:记CRenderTarget:DrawText()绘制中文乱码的BUG及解决办法 转载请注明出处:http://www.cnblogs.com/Ray1024 一.问题描述 在MFC中使用Dir ...

  4. Javascript高级编程学习笔记(90)—— Canvas(7) 绘制图像

    绘制图像 2D绘图上下文内置了对图像的支持 如果希望将一幅图绘制到画布上,可以使用 drawImage() 的方法 该方法有三种不同的参数数组合以对应不同的应用场景 将<img>绘制到画布 ...

  5. VC++ MFC单文档应用程序SDI下调用glGenBuffersARB(1, &pbo)方法编译通过但执行时出错原因分析及解决办法:glewInit()初始化的错误

    1.问题症状 在VC++环境下,利用MFC单文档应用程序SDI下开发OpenGL程序,当调用glGenBuffersARB(1, &pbo)方法编译通过但执行时出错,出错代码如下: OpenG ...

  6. jquery.min.map 404 (Not Found)出错的原因及解决办法

    Chrome 更新后出现了 jquery.min.map 404  (Not Found) 的信息 这个到底是什么东西?查询了一下,得到了以下资料 JQuery 官方解释 摘录一下內容 从 jQuer ...

  7. VM虚拟机拍摄快照时出错或者克隆失败解决办法

    在换了固态硬盘后,下载好VM,装虚拟机,结果克隆虚拟机和拍摄快照时出问题了. 拍摄快照时出错或者隆失败出现参数错误如图: 所提供的参数中有一个无效参数 解决办法 出现这个问题一般是在机械硬盘的电脑上面 ...

  8. C# dataGridView不显示默认行的解决办法

    当页面只有一个dataGirdView时,调用From的Activated函数,在Activated函数里调用以下两个函数,可清除默认选择行 private void From_Activated(o ...

  9. 迅雷Bolt图像拉伸不清晰的解决办法

    迅雷Bolt库中的图像拉伸的效果锯齿比较严重,常见的导致锯齿的情况: 1.在使用ImageObject时,drawmode为1拉伸模式下: 2.使用Bitmap类的Stretch函数拉伸图像: 虽然I ...

随机推荐

  1. DRF的版本、认证、权限

    DRF的版本 版本控制是做什么用的, 我们为什么要用 首先我们要知道我们的版本是干嘛用的呢~~大家都知道我们开发项目是有多个版本的~~ 当我们项目越来越更新~版本就越来越多~~我们不可能新的版本出了~ ...

  2. CanvasRenderingContext2D.lineDashOffset

    https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineDashOffset CanvasRende ...

  3. java 多线程 day08 java5多线程新特性

    /** * Created by chengtao on 17/12/3. */public class Thread0801_java5_Atomaic { /* 三个包: http://tool. ...

  4. sql 区分大小写

    sql server默认是不区分大小写的. 要查看sqlserver数据库是否区分大小写,我么可以查看系统存储过程sys.sp_server_info exec sys.sp_server_info ...

  5. ZenCart分类数量打折Category Quantity Discount插件

    附件:http://files.cnblogs.com/lzj87980239/Category_Quantity_Discount.rar 效果图后台1.将update.sql导入到数据库 2.将Y ...

  6. java反射之构造方法(三)

    一. 1. 二.获取类的构造方法信息. ######################################################################## 三.

  7. 运输层协议--TCP及UDP协议

    TCP及UDP协议 按照网络的五层分级结构来看,TCP及UDP位于运输层,故TCP及UDP是运输层协议.TCP协议--传输控制协议UDP协议--用户数据报协议 多路复用及多路分解 图多路复用及多路分解 ...

  8. vue跳转页面传值怎么传?

    这是路由跳转: this.$router.push( { name: 'holderResult', params: { meetingId:self.$route.params.meetingId} ...

  9. ACM-ICPC 2018 焦作赛区网络预赛 F. Modular Production Line (区间K覆盖-最小费用流)

    很明显的区间K覆盖模型,用费用流求解.只是这题N可达1e5,需要将点离散化. 建模方式步骤: 1.对权值为w的区间[u,v],加边id(u)->id(v+1),容量为1,费用为-w; 2.对所有 ...

  10. ACM-ICPC 2018 沈阳赛区网络预赛 F. Fantastic Graph (上下界网络流)

    正解: #include <bits/stdc++.h> using namespace std; const int INF = 0x3f3f3f3f; const int MAXN=1 ...