解决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 相关文章推荐
CSS+JS构建的图片查看器
Jul 22 Javascript
Extjs根据条件设置表格某行背景色示例
Jul 23 Javascript
JavaScript中判断原生函数检查function是否是原生代码
Sep 09 Javascript
jQuery实现仿Google首页拖动效果的方法
May 04 Javascript
jQuery mobile 移动web(6)
Dec 20 Javascript
jQuery实现发送验证码并60秒倒计时功能
Nov 25 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
javascript实现日期三级联动下拉框选择菜单
Dec 03 Javascript
解决vue单页面修改样式无法覆盖问题
Aug 05 Javascript
vue data引入本地图片的两种方式小结
Nov 13 Javascript
使用Typescript和ES模块发布Node模块的方法
May 25 Javascript
JS实现躲避粒子小游戏
Jun 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生成静态页面分析 模板+缓存+写文件
2009/08/17 PHP
在PHP中养成7个面向对象的好习惯
2010/01/28 PHP
PHP设计模式之解释器模式的深入解析
2013/06/13 PHP
关于PHPDocument 代码注释规范的总结
2013/06/25 PHP
PHP实现根据图片色界在不同位置加水印的方法
2015/08/08 PHP
PHP基于递归算法解决兔子生兔子问题
2018/05/11 PHP
PHP实现的支付宝支付功能示例
2019/03/26 PHP
基于laravel belongsTo使用详解
2019/10/18 PHP
jQuery的初始化与对象构建之浅析
2011/04/12 Javascript
JavaScript 基础篇之运算符、语句(二)
2012/04/07 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
Jquery Ajax xmlhttp请求成功问题
2015/02/04 Javascript
JavaScript实现文字与图片拖拽效果的方法
2015/02/16 Javascript
jQuery打字效果实现方法(附demo源码下载)
2015/12/18 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
2016/02/19 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
2016/06/06 Javascript
javascript 面向对象function详解及实例代码
2017/02/28 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
jQuery length 和 size()区别总结
2018/04/26 jQuery
mpvue微信小程序开发之实现一个弹幕评论
2019/11/24 Javascript
详解JavaScript修改注册表的方法
2020/01/05 Javascript
jquery实现直播视频弹幕效果
2020/02/25 jQuery
详解vue-router的导航钩子(导航守卫)
2020/11/02 Javascript
[58:23]LGD vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python中的自定义函数学习笔记
2014/09/23 Python
python简单线程和协程学习心得(分享)
2017/06/14 Python
Python django实现简单的邮件系统发送邮件功能
2017/07/14 Python
Python实现的redis分布式锁功能示例
2018/05/29 Python
Django如何自定义分页
2018/09/25 Python
Python3 使用pillow库生成随机验证码
2019/08/26 Python
Python2与Python3的区别点整理
2019/12/12 Python
pytorch实现CNN卷积神经网络
2020/02/19 Python
DC Shoes官网:美国滑板鞋和服饰品牌
2017/09/03 全球购物
JD Sports法国:英国篮球和运动时尚的领导者
2017/09/28 全球购物
国企干部对照检查材料
2014/08/22 职场文书
公司委托书格式范文
2014/10/09 职场文书