问题分析

我们在调整画布大小时，希望画布中的图形保持不变，只是改变画布本身的大小。但是如果使用Css设置画布大小，则会出现问题。

问题描述

如果使用Css设置Canvas画布的大小，则导致画布按比例缩放到你设置的值。

原因

在Canvas元素的内部存在一个名为2d渲染环境（2d redering context）的对象，所以，通过Css设置画布尺寸会引起奇怪的效果。

解决方案

在Html页面上加入canvas元素（不能使用js动态加入canvas）。

通过Html设置画布大小。可以直接在Html页面上设置Canvas元素的大小：

<canvas id="testCanvas" width="" height=""></canvas>

也可以通过js设置画布大小：

    var canvas = document.getElementById("testCanvas");

    canvas.width = ;

    canvas.height = ;

这两种方法都可以。

需要注意的是，设置画布大小后，画布所有的样式和内容会重置（如画布上的图形会消失，在设置画布大小后需要重新绘制）。

示例

首先我们创建一个宽度为200px，高度为100px的画布，它的边框为红色。然后在中间画一个大小为20*20的正方形：

代码

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

<canvas id="testCanvas"></canvas>

<script>

    var canvas, context;

    canvas = document.getElementById("testCanvas");

    canvas.width = ;

    canvas.height = ;

    canvas.style.border = "1px solid red";

    context = canvas.getContext("2d");

    context.strokeStyle = "#99cc33";

    context.fillRect(, , , );

</script>

</body>

</html>

将画布大小缩小1倍

使用css设置画布大小

相关代码

    canvas.style.width = "100px";

    canvas.style.height = "50px";

效果

分析

我们发现画布是整体按比例缩小了1倍。

使用js设置画布大小

相关代码

    canvas.width = ;

    canvas.height = ;

    //设置画布大小后，所有样式会重置。因此需要重新绘制正方形

    context.fillRect(, , , );

效果

分析

相当于把画布的右半部和下半部去掉了，达到了我们预期的效果。

关于使用Css设置Canvas画布大小的问题的更多相关文章

  1. RN canvas画布大小之谜

    一.需求 在一个高640.宽360的canvas内画一些坐标点. 二.问题 坐标点只显示了一部分,剩下的点没显示(其坐标属于(640,360)区域). 三.原因 canvas默认的画布大小是高150, ...

  2. vue中动态设置echarts画布大小

    document.getElementById('news-shopPagechart').style.height = this.heightpx2+'px'; //heightpx2定义在data ...

  3. canvas元素大小与绘图表面大小

    原文链接:canvas总结:元素大小与绘图表面大小 前言 我们使用canvas的时候一般在canvas元素中直接设置它的width和height: 1 <canvas id="myCa ...

  4. css颜色，字体大小的设置

    设置字体的颜色通过下面的代码: color : #f00; color是颜色的意思,color用来设置一个标签的前景色,表现出来也就是元素文本的颜色. 它的值,一般都是使用#加16进制的颜色值来表示. ...

  5. html5——canvas画布

    一.基本介绍 1,canvas是画布,可以描画线条,图片等,现代的浏览器大部分都支持. canvas的width,height默认为300*150,要指定画布大小,不能用css样式的widh,heig ...

  6. canvas画布基本知识点总结

    HTML5的canvas元素使用JavaScript画图: <canvas width="600" height="400"> </canva ...

  7. html 5 canvas画布整理

    1. 创建canvas画布<canvas id="myCanvas" width="800" height="800" >< ...

  8. canvas画布在主流浏览器中的尺寸限制

    通过测试发现,canvas在不同浏览器下面有不同的最大尺寸限制. 大家都知道,canvas有自身的width,height属性来控制尺寸,用css的width,height,控制显示的大小.可以理解为 ...

  9. 【读书笔记《Android游戏编程之从零开始》】12.游戏开发基础（Canvas 画布）

    1.Canvas 画布 画布类 Canvas 封装了图形和图片绘制等内容,此类常用的函数说明如下: drawColor(int color) 作用:绘制颜色覆盖画布,常用于刷屏 参数:颜色值,也可用十 ...

随机推荐

  1. INFORMATICA 的调优之一 源数据的优化

    5W1H法来实现源数据的优化 做数据仓库项目的朋友都能感到数据质量和数据抽取展现的性能是整个数据仓库项目的重点.下面谈谈我在DW项目中处理源数据质量问题的5W1H方法. 5W : WHO ,WHAT, ...

  2. HTTPS(SSL/TLS) 原理之深入浅出

    注:本文参考自网络上的多篇HTTPS相关文章,本人根据自己的理解,进行一些修改,综合. 1. 必要的加密解密基础知识 1)对称加密算法:就是加密和解密使用同一个密钥的加密算法.因为加密方和解密方使用的 ...

  3. spring中的 classpath* 存在可移植性问题

    classpath* 的可移植性问题,许多人都应该遇到过了.下面就是一个例子(使用的是spring4.1.5和mybatis3.2.8): <bean id="sqlSessionFa ...

  4. 在MFC中添加用户自定义消息

    1.定义一个宏 (用户自定义消息从WM_USER开始) #define WM_XXXXX WM_USER+数值 2.声明一个函数并实现 afx_msg LRESULT OnXXXXX( WPARAM ...

  5. 最近学习linux常用命令。

    一.文件系统的管理tips:输入命令的时候要常用tab键来补全 ls 查看目录信息 ( ls / ) ls -l 等价于 llpwd 查看当前所处的路径 cd 切换目录 (cd /) ,如果不带参数则 ...

  6. 百度地图的简单使用 ——html js

    一.简介 百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富.交互性强的地图应用,包含了构建地图基本功能的各种接口,提供了诸如本地 ...

  7. 迅为顶级四核开发板 Exynos4412开发板，仅售560元

    业内公认最强四核 藐视一切挑战 ●四核CPU  ●四核GPU  ●双通道内存  ●HKMG技术  ●超级性能  ●至佳稳定  ●供货周期长 Exynos 4412处理器成功应用于三星GALAXY S3 ...

  8. HTML常用文本元素

    HTML是超文本标记语言,它提供网页的具体内容,包括文本.表单.图像.表格.链接.多媒体.列表等.其中文本是我们遇到的最多的展示内容.正确的使用文本标签,会使页面具有语义化,也有利于SEO. 文本标签 ...

  9. HDU 5101 Select --离散化+树状数组

    题意:n 组,每组有一些值,求 在不同的两组中每组选一个使值的和大于k的方法数. 解法:n * Cnt[n] <= 1000*100 = 100000, 即最多10^5个人,所以枚举每个值x,求 ...

  10. 为VS集成IL环境

    为VS2012集成IL工具 在之前的版本VS2010中,在VS的安装目录下/Tools/IL Disassembler这个工具(IL中间语言查看器),但是我想直接把它集成在VS2012里使用, 操作方 ...