解决canvas画布使用fillRect()时高度出现双倍效果的问题
时间:2019-03-30
本文章向大家介绍解决canvas画布使用fillRect()时高度出现双倍效果的问题,主要包括解决canvas画布使用fillRect()时高度出现双倍效果的问题使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
当设置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>
显示情况如下:
该效果与我们预想的不同,此时有两种修改方案:
(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()时高度出现双倍效果的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
- Leetcode 297. Serialize and Deserialize Binary Tree
- Leetcode 295. Find Median from Data Stream
- 投入大见效慢,还要做AI?
- Leetcode 292. Nim Game
- Leetcode 290. Word Pattern
- 【深度学习】使用tensorflow实现VGG19网络
- Leetcode 289. Game of Life
- Leetcode 287. Find the Duplicate Number
- Leetcode 284. Peeking Iterator
- Leetcode 283. Move Zeroes
- Leetcode 282. Expression Add Operators
- Leetcode 279. Perfect Squares
- Leetcode 278. First Bad Version
- Leetcode 275. H-Index II
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 重复读取 HttpServletRequest 中 InputStream 的方法
- 测试面试题集锦(三)| 计算机网络和数据库篇(附答案)
- 关于Scikit-Learn你(也许)不知道的10件事
- 技术天地 | CSS-in-JS:一个充满争议的技术方案
- 安全研究 | 通过域名劫持实现Azure DevOps账户劫持
- 一款针对DLL劫持的恶意DLL生成器
- AuthMatrix:一款针对Web应用和服务的认证安全检测BurpSuite工具
- KITT-Lite:基于Python实现的轻量级命令行渗透测试工具集
- 一次KimSuky攻击事件分析
- OpenCV中如何使用滚动条动态调整参数
- 一文读懂「分布式架构」
- 老哥,您看我这篇Java集合,还有机会评优吗?
- 在 IDEA 中使用 Java 热部署插件 JRebel
- 后端必备 Git 分支开发:规范指南
- 大量的 TIME_WAIT 状态连接怎么处理?(文末有福利)