解决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 相关文章推荐
Prototype使用指南之string.js
Jan 10 Javascript
模拟用户操作Input元素,不会触发相应事件
May 11 Javascript
Apply an AutoFormat to an Excel Spreadsheet
Jun 12 Javascript
基于jQuery的简单九宫格实现代码
Aug 09 Javascript
表单验证插件Validation应用的实例讲解
Oct 10 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
Sep 18 Javascript
jQuery中animate的几种用法与注意事项
Dec 12 Javascript
JS实现的二叉树算法完整实例
Apr 06 Javascript
JavaScript创建对象的七种方式全面总结
Aug 21 Javascript
浅谈react-router@4.0 使用方法和源码分析
Jun 04 Javascript
Vue利用Blob下载原生二进制数组文件
Sep 25 Javascript
Vue.js仿Select下拉框效果
Feb 18 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图像处理函数大全(推荐收藏)
2013/07/11 PHP
php多功能图片处理类分享(php图片缩放类)
2014/03/14 PHP
[JS]点出统计器
2020/10/11 Javascript
浅谈Javascript事件处理程序的几种方式
2012/06/27 Javascript
Jquery.addClass始终无效原因分析
2013/09/08 Javascript
基于jquery的simpleValidate简易验证插件
2014/01/31 Javascript
浅谈JavaScript中的String对象常用方法
2015/02/25 Javascript
基于javascript实现样式清新图片轮播特效
2016/03/30 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
2020/11/24 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
2019/05/14 Javascript
微信小程序实现录音时的麦克风动画效果实例
2019/05/18 Javascript
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
2019/09/27 Javascript
vue 路由守卫(导航守卫)及其具体使用
2020/02/25 Javascript
详解Vue数据驱动原理
2020/11/17 Javascript
python多进程实现文件下载传输功能
2018/07/28 Python
python selenium 弹出框处理的实现
2019/02/26 Python
python入门之井字棋小游戏
2020/03/05 Python
python模拟斗地主发牌
2020/04/22 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
解决python父线程关闭后子线程不关闭问题
2020/04/25 Python
Python常用库Numpy进行矩阵运算详解
2020/07/21 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
八年级美术教学反思
2014/02/02 职场文书
入党自我评价范文
2014/02/02 职场文书
体育教师个人的自我评价
2014/02/16 职场文书
学习决心书范文
2014/03/11 职场文书
《春笋》教学反思
2014/04/15 职场文书
护理专业求职信
2014/06/15 职场文书
党员群众路线个人整改措施思想汇报
2014/10/12 职场文书
开展警示教育活动总结
2015/05/09 职场文书
2015年路政工作总结
2015/05/22 职场文书
Mysql数据库值的添加、修改、删除及清空操作实例
2021/06/20 MySQL
Python中递归以及递归遍历目录详解
2021/10/24 Python
Shell脚本一键安装Nginx服务自定义Nginx版本
2022/03/20 Servers
Python+Pillow+Pytesseract实现验证码识别
2022/05/11 Python