解决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 相关文章推荐
Javascript 判断 object 的特定类转载
Feb 01 Javascript
关于jquery动态增减控件的一些想法和小插件
Aug 01 Javascript
关于JavaScript的面向对象和继承有利新手学习
Jan 11 Javascript
关于js数组去重的问题小结
Jan 24 Javascript
jquery实现当滑动到一定位置时固定效果
Jun 17 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
Jul 01 Javascript
js css实现垂直方向自适应的三角提示菜单
Jun 26 Javascript
AngularJs Understanding the Controller Component
Sep 02 Javascript
基于JS对象创建常用方式及原理分析
Jun 28 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
JavaScript Array对象使用方法解析
Sep 24 Javascript
vue实现学生信息管理系统
May 30 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 在文件指定行插入数据的代码
2010/05/08 PHP
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
php缩放图片(根据宽高的等比例缩放)实例介绍
2013/06/09 PHP
php接口和抽象类使用示例详解
2014/03/02 PHP
YII实现分页的方法
2014/07/09 PHP
PHP中把有符号整型转换为无符号整型方法
2015/05/27 PHP
PHP汉字转换拼音的函数代码
2015/12/30 PHP
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
List the Codec Files on a Computer
2007/06/18 Javascript
兼容多浏览器的字幕特效Marquee的通用js类
2008/07/20 Javascript
javascript 图片上传预览-兼容标准
2009/06/01 Javascript
js 屏蔽鼠标右键脚本附破解方法
2009/12/03 Javascript
IE下双击checkbox反应延迟问题的解决方法
2014/03/27 Javascript
jquery处理页面弹出层查询数据等待操作实例
2015/03/25 Javascript
轻松实现js图片预览功能
2016/01/18 Javascript
文本框只能输入数字的js代码(含小数点)
2016/07/10 Javascript
js中遍历Map对象的简单实例
2016/08/08 Javascript
Bootstrap table的使用方法
2016/11/02 Javascript
详解nodejs 文本操作模块-fs模块(三)
2016/12/22 NodeJs
正则中的回溯定义与用法分析【JS与java实现】
2016/12/27 Javascript
微信小程序实现图片自适应(支持多图)
2017/01/25 Javascript
vue中各选项及钩子函数执行顺序详解
2018/08/25 Javascript
vue百度地图 + 定位的详解
2019/05/13 Javascript
详解JavaScript 的执行机制
2020/09/18 Javascript
[01:20:47]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第一场 1月19日
2021/03/11 DOTA
python中的随机函数小结
2018/01/27 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
Python中的 ansible 动态Inventory 脚本
2020/01/19 Python
一款利用纯css3实现的超炫3D表单的实例教程
2014/12/01 HTML / CSS
2015年员工试用期工作总结
2014/12/12 职场文书
工作调动申请报告
2015/05/18 职场文书
2016道德模范先进事迹材料
2016/02/26 职场文书
Python中Permission denied的解决方案
2021/04/02 Python
Python如何用re模块实现简易tokenizer
2022/05/02 Python
SQL中的连接查询详解
2022/06/21 SQL Server