解决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()时高度出现双倍效果的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决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.getEle

  • JS+canvas画布实现炫酷的旋转星空效果示例

    JS+canvas画布实现炫酷的旋转星空效果示例

    本文实例讲述了JS+canvas画布实现炫酷的旋转星空效果.分享给大家供大家参考,具体如下: canvas是html5的新标签,其画布功能尤为强大.当然了canvas在IE10以下浏览器是不兼容的,所以呢为了特效肯定是牺牲一定的兼容性.这里呢,分享一个基于canvas开发的浩瀚星河插件,其实这个源代码是网上下载的,我把它整合了一下,重新封装一些参数提供更多的可改项. 首先引入两个javascript脚本,一个是jquery插件,另一个是封装好的cosmos_canvas.js <script s

  • canvas 画布在主流浏览器中的尺寸限制详细介绍

    canvas 画布在主流浏览器中的尺寸限制详细介绍 通过测试发现,canvas在不同浏览器下面有不同的最大尺寸限制. 大家都知道,canvas有自身的width,height属性来控制尺寸,用css的width,height,控制显示的大小.可以理解为canvas就是一个img,属性的width,height就是这个img的原图像素大小.但在各浏览器下,设置canvas尺寸时发现有最大尺寸限制.测试一下与大家分享. 测试代码 <!DOCTYPE html> <html> <h

  • Android 游戏开发之Canvas画布的介绍及方法

    Canvas,在英语中,这个单词的意思是帆布.在Android中,则把Canvas当做画布,只要我们借助设置好的画笔(Paint类)就可以在画布上绘制我们想要的任何东西:另外它也是显示位图(Bitmap类)的核心类.随用户的喜好,Canvas还可设置一些关于画布的属性,比如,画布的颜色.尺寸等.Canvas提供了如下一些方法:    Canvas(): 创建一个空的画布,可以使用setBitmap()方法来设置绘制具体的画布.    Canvas(Bitmap bitmap): 以bitmap对

  • JavaScript html5 canvas画布中删除一个块区域的方法

    JavaScript html5 canvas画布中删除一个块区域的方法

    本文实例讲述了html5 canvas画布中删除一个块区域的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 附:图中,黑色小方块即为删除掉的块区域 具体代码如下: index.html: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <title>

  • 快速解决Canvas.toDataURL 图片跨域的问题

    如题,在将页面的图片地址进行本地输出时(Html2Canvas.js),因不同源存在跨域问题,会出现toDataURL访问权限问题: [Redirect at origin 'http://sub1.xx.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested res

  • jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题

    项目中使用的jquery版本是jquery-3.2.1,在使用layui弹出全屏iframe窗口时,iframe窗口顶部总是出现一个152px高的滚动窗口无法实现真正全屏,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial

  • 解决Echarts 显示隐藏后宽度高度变小的问题

    Echarts 是现在程序员做图表用到比较多的一种技术,前段时间,我就用了一下Echarts,我原本是将饼图先隐藏,然后点击按钮让它再显示出来,但是再显示时,饼状图出现了问题,它变得特别小,根本不能用,然后,就此,我找了下原因 原因:Echarts 图表是根据你定义的div 的样式来确定图表的大小,当图表隐藏时,Echarts会找不到div的宽和高,再次显示时它会给自己一个非常小的默认宽高值,所以在隐藏显示后会发现它变得非常非常的小. 解决:将初始化放在click事件里,给一个flag 控制显示

  • 解决MyEclipse下启动项目时JBoss内存溢出的问题

    解决MyEclipse下启动项目时JBoss内存溢出的问题

    配置1: -Xms64m -Xmx512m 配置2: -c default -b 0.0.0.0 -Xmx1024M -Xms512M -XX:MaxPermSize=256m 以上这篇解决MyEclipse下启动项目时JBoss内存溢出的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 完美解决thinkphp唯一索引重复时出错的问题

    完美解决thinkphp唯一索引重复时出错的问题

    比如如下字段(g_check_id):唯一索引 如果插入数据时(g_check_id)出现相同的值的话,程序本身是会报错的. 所以做类似如下处理: 以上这篇完美解决thinkphp唯一索引重复时出错的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

随机推荐