解决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 相关文章推荐
获取Javscript执行函数名称的方法
Dec 22 Javascript
jquery 学习之二 属性(类)
Nov 25 Javascript
用Jquery实现滚动新闻
Feb 12 Javascript
js钢琴按钮波浪式图片排列效果代码分享
Aug 26 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
Feb 13 Javascript
详解如何实现一个简单的 vuex
Feb 10 Javascript
使用webpack3.0配置webpack-dev-server教程
May 29 Javascript
Vue-cli项目部署到Nginx服务器的方法
Nov 01 Javascript
vue如何使用async、await实现同步请求
Dec 09 Javascript
vue data对象重新赋值无效(未更改)的解决方式
Jul 24 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
JavaScript架构搭建前端监控如何采集异常数据
Jun 25 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邮件类
2007/01/03 PHP
php cli 方式 在crotab中运行解决
2010/02/08 PHP
php警告Creating default object from empty value 问题的解决方法
2014/04/02 PHP
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
2017/05/11 PHP
ExtJs grid行 右键菜单的两种方法
2010/06/19 Javascript
myFocus slide3D v1.1.0 使用方法与下载
2011/01/12 Javascript
JavaScript_ECMA5数组新特性详解
2016/06/12 Javascript
JS中sort函数排序用法实例分析
2016/06/16 Javascript
JavaScript如何实现跨域请求
2016/08/05 Javascript
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
Vue使用NPM方式搭建项目
2018/10/25 Javascript
JS对日期操作封装代码实例
2019/11/08 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
2019/11/12 Javascript
[01:22:10]Ti4 循环赛第二日 DK vs Empire
2014/07/11 DOTA
python基础教程之简单入门说明(变量和控制语言使用方法)
2014/03/25 Python
python+matplotlib绘制3D条形图实例代码
2018/01/17 Python
python文件拆分与重组实例
2018/12/10 Python
python中的数据结构比较
2019/05/13 Python
Pycharm 字体大小调整设置的方法实现
2019/09/27 Python
简单了解Python变量作用域正确使用方法
2020/06/12 Python
Python基于Faker假数据构造库
2020/11/30 Python
python实现ping命令小程序
2020/12/28 Python
python爬虫基础之urllib的使用
2020/12/31 Python
Python 实现劳拉游戏的实例代码(四连环、重力四子棋)
2021/03/03 Python
Python3自带工具2to3.py 转换 Python2.x 代码到Python3的操作
2021/03/03 Python
HTML5获取当前地理位置并在百度地图上展示的实例
2020/07/10 HTML / CSS
MADE荷兰:提供原创设计师家具
2018/04/03 全球购物
DNA测试:Orig3n
2019/03/01 全球购物
请说出以下代码输出什么
2013/08/30 面试题
注塑工厂厂长岗位职责
2013/12/02 职场文书
2014年党的群众路线教育实践活动总结
2014/04/25 职场文书
应届生自荐信
2014/06/30 职场文书
教育见习报告范文
2014/11/03 职场文书
员工年终考核评语
2014/12/31 职场文书
关于antd tree 和父子组件之间的传值问题(react 总结)
2021/06/02 Javascript
vue组件冲突之引用另一个组件出现组件不显示的问题
2022/04/13 Vue.js