解决canvas画布使用fillRect()时高度出现双倍效果的问题


Posted in Javascript onAugust 03, 2017

当设置canvas的宽度和高度时,只有内嵌css有效,外部css会出现拉伸的情况,例如:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
    window.onload=function(){
    
var canvas=document.getElementById('canvas').getContext('2d');
    

canvas.fillRect(50,50,50,50);
    }
  </script>
  <style>
    body{
    

background: #000;
    }
    #canvas{
    

width: 300px;
    

height: 400px;
    

background:#fff;
    }
  </style>
</head>
<body>
  <canvas id="canvas">
    <span>不支持canvas标签</span>
  </canvas>
</body>
</html>

显示情况如下:

解决canvas画布使用fillRect()时高度出现双倍效果的问题

该效果与我们预想的不同,此时有两种修改方案:

(1) 在代码js中添加设置宽高属性的代码设置宽度和高度:

canvas.setAttribute("height",canvas.clientHeight);
canvas.setAttribute("width",canvas.clientWidth);

(2) 除去外部css中设置宽高属性的代码,给canvas标签直接添加宽度和高度属性:

<canvas id="canvas" width="300" height="400" >
    <span>不支持canvas标签</span>
</canvas>

最后显示效果如下:

解决canvas画布使用fillRect()时高度出现双倍效果的问题

以上这篇解决canvas画布使用fillRect()时高度出现双倍效果的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
location.search在客户端获取Url参数的方法
Jun 08 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
在JavaScript中使用JSON数据
Feb 15 Javascript
js滚动条平滑移动示例代码
Mar 29 Javascript
浅谈JavaScript的内置对象和浏览器对象
Jun 03 Javascript
详解Angular中$cacheFactory缓存的使用
Aug 19 Javascript
EasyUI学习之Combobox级联下拉列表(2)
Dec 29 Javascript
超全面的JavaScript开发规范(推荐)
Jan 21 Javascript
微信小程序后台解密用户数据实例详解
Jun 28 Javascript
node前端模板引擎Jade之标签的基本写法
May 11 Javascript
vue实现数据控制视图的原理解析
Jan 07 Javascript
JS apply用法总结和使用场景实例分析
Mar 14 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
Aug 03 #Javascript
老生常谈js数据类型
Aug 03 #Javascript
详解JavaScript按概率随机生成事件
Aug 02 #Javascript
angular中的cookie读写方法
Aug 02 #Javascript
webpack进阶——缓存与独立打包的用法
Aug 02 #Javascript
使用vue构建移动应用实战代码
Aug 02 #Javascript
React Native之ListView实现九宫格效果的示例
Aug 02 #Javascript
You might like
PHP截取指定图片大小的方法
2014/12/10 PHP
PHP7 其他修改
2021/03/09 PHP
JavaScript实现页面实时显示当前时间的简单实例
2013/07/20 Javascript
js全屏显示显示代码的三种方法
2013/11/11 Javascript
浅谈页面装载js及性能分析方法
2014/12/09 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
2016/09/30 Javascript
JS检测数组类型的方法小结
2017/03/14 Javascript
Javascript es7中比较实用的两个方法示例
2017/07/21 Javascript
一步步教你利用Canvas对图片进行处理
2017/09/19 Javascript
layui框架table 数据表格的方法级渲染详解
2018/08/19 Javascript
Node.js的进程管理的深入理解
2019/01/09 Javascript
laypage+SpringMVC实现后端分页
2019/07/27 Javascript
如何解决日期函数new Date()浏览器兼容性问题
2019/09/11 Javascript
Vue混入mixins滚动触底的方法
2019/11/22 Javascript
vue实现图片按比例缩放问题操作
2020/08/11 Javascript
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python实现获取网站PR及百度权重
2015/01/21 Python
在Django的模板中使用认证数据的方法
2015/07/23 Python
python之django母板页面的使用
2018/07/03 Python
Python 中pandas索引切片读取数据缺失数据处理问题
2019/10/09 Python
python操作gitlab API过程解析
2019/12/27 Python
Python 字符串处理特殊空格\xc2\xa0\t\n Non-breaking space
2020/02/23 Python
python 基于opencv去除图片阴影
2021/01/26 Python
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
加拿大租车网站:Enterprise Rent-A-Car
2018/07/26 全球购物
商务主管岗位职责
2013/12/08 职场文书
学生自我鉴定模板
2013/12/30 职场文书
五年级英语教学反思
2014/01/31 职场文书
人事经理岗位职责
2014/04/28 职场文书
劳动竞赛口号
2014/06/16 职场文书
外贸业务员求职信
2014/06/16 职场文书
劳动争议和解协议书范本
2014/11/20 职场文书
学校教学工作总结2015
2015/05/19 职场文书
2015年语文教师工作总结
2015/05/25 职场文书
分析mysql中一条SQL查询语句是如何执行的
2021/06/21 MySQL
MySQL RC事务隔离的实现
2022/03/31 MySQL