解决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 相关文章推荐
推荐dojo学习笔记
Mar 24 Javascript
JavaScript 模块的循环加载实现方法
Dec 13 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 Javascript
基于Vue2的移动端开发环境搭建详解
Nov 03 Javascript
angular+bootstrap的双向数据绑定实例
Mar 03 Javascript
ES6模块化的import和export用法方法总结
Aug 08 Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 Javascript
详解从Vue-router到html5的pushState
Jul 21 Javascript
Vue 实现前端权限控制的示例代码
Jul 09 Javascript
详解JavaScript中精度失准问题及解决方法
Feb 04 Javascript
分享一款超好用的JavaScript 打包压缩工具
Apr 26 Javascript
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
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/09/09 PHP
PHP中把数据库查询结果输出为json格式简单实例
2015/04/09 PHP
Yii数据读取与跳转参数传递用法实例分析
2016/07/12 PHP
PHP迭代器接口Iterator用法分析
2017/12/28 PHP
js 自定义个性下拉选择框示例
2013/08/20 Javascript
屏蔽script注入小例子
2013/11/12 Javascript
绑定回车enter事件代码
2014/05/18 Javascript
前端轻量级MVC框架CanJS详解
2014/09/26 Javascript
js+html5实现可在手机上玩的拼图游戏
2015/07/17 Javascript
jQuery动画效果图片轮播特效
2016/01/12 Javascript
JavaScript设计模式开发中组合模式的使用教程
2016/05/18 Javascript
JSONP跨域请求实例详解
2016/07/04 Javascript
VueJS全面解析
2016/11/10 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
详解如何使用webpack打包Vue工程
2017/05/27 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
2017/08/18 Javascript
Python中的Descriptor描述符学习教程
2016/06/02 Python
Python元字符的用法实例解析
2018/01/17 Python
scrapy爬虫完整实例
2018/01/25 Python
Python常见排序操作示例【字典、列表、指定元素等】
2018/08/15 Python
Python 使用Opencv实现目标检测与识别的示例代码
2020/09/08 Python
Anaconda使用IDLE的实现示例
2020/09/23 Python
用css3写出气球样式的示例代码
2017/09/11 HTML / CSS
WiFi云数码相框:Nixplay
2018/07/05 全球购物
澳大利亚墨水站Ink Station:墨水和碳粉打印机墨盒
2019/03/24 全球购物
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
工商管理实习自我鉴定
2013/09/28 职场文书
澳大利亚商务邀请函
2014/01/17 职场文书
毕业生个人求职自荐信
2014/02/26 职场文书
项目工作说明书
2014/07/29 职场文书
商铺租房协议书范本
2014/12/04 职场文书
2014年路政工作总结
2014/12/10 职场文书
2015年小学开学寄语
2015/02/27 职场文书
2015年学校办公室工作总结
2015/05/26 职场文书
工作简报格式范文
2015/07/21 职场文书
浅谈移动端中的视口(viewport)的具体使用
2021/04/13 HTML / CSS