1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

关于使用Css设置Canvas画布大小的问题

作者:用户 来源:互联网 时间:2016-03-11 16:25:42

canvascontext大小大小设置效果画布html canvas css

关于使用Css设置Canvas画布大小的问题 - 摘要: 本文讲的是关于使用Css设置Canvas画布大小的问题, 我们在调整画布大小时,希望画布中的图形保持不变,只是改变画布本身的大小。但是如果使用Css设置画布大小,则会出现问题。 问题描述 如果使用Css设置Can

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

问题描述

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

原因

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

解决方案

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

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

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

    var canvas = document.getElementById("testCanvas");     canvas.width = 200;     canvas.height = 100;

这两种方法都可以。

示例

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

关于使用Css设置Canvas画布大小的问题-canvas 画布大小

代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<canvas id="testCanvas"></canvas>
<script>
    var canvas, context;
    canvas = document.getElementById("testCanvas");

    canvas.width = 200;
    canvas.height = 100;
    canvas.style.border = "1px solid red";

    context = canvas.getContext("2d");
    context.strokeStyle = "#99cc33";
    context.fillRect(90, 40, 20, 20);
</script>
</body>
</html>

将画布大小缩小1倍

使用css设置画布大小

相关代码

    canvas.style.width = "100px";     canvas.style.height = "50px";

效果

关于使用Css设置Canvas画布大小的问题-canvas 设置画布大小

分析

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

使用js设置画布大小

相关代码

canvas.width = 100;
    canvas.height = 50;

    //设置画布大小后,所有样式会重置。因此需要重新绘制正方形
    context.fillRect(90, 40, 20, 20);

效果

关于使用Css设置Canvas画布大小的问题-canvas 获取画布大小

分析

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



以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索canvas , context , 大小 , 大小设置 , 效果 , 画布 html canvas css canvas 画布大小、canvas 设置画布大小、canvas 获取画布大小、canvas 改变画布大小、canvas的画布大小平铺,以便于您获取更多的相关知识。

css圆形加载百分比如何实现

... 解决方案二: 如果纯CSS的话,得用CSS3实现吧,或者使用SVG绘图,或者使用Canvas; 解决方案三: 我的想法是用两个初始宽高相同div做绝对定位,两张不同颜色的图片大小相同且固定大小为div初始大小相对div绝对定位bo...

html5 canvas在高倍屏下变模糊的处理办法

...canvas 先补充一个基础知识点: 要设置canvas的画布大小,使用的是canvas.width 和 canvas.height; 要设置画布的实际渲染大小,使用的style或CSS设置的 width 和height,只是简单的对画布进行缩放。 譬如: canvas的实际大小的640px × 800px,...

HTML5之API总结

...触的最后一个位置与路径的起点。如想要保持路径开放,使用 fill()绘图,不用这个方法 stroke()用于创建路径轮廓 fill()用于绘制实心形状 clip()用于创建一个由路...

新增的元素和废除的元素、新增的属性和废除的属性

...素的类型 email、url、number、range、DatePickers废除的元素能使用css替代的元素:basefont、big、center、font、s、tt、u等不能使用frame框架只有部分浏览器支持的元素其他的 废除元素新增的属性表单相关的 属性链接相关的属性其他属性 ...

利用Canvas实现360度浏览

...在走HTML5游戏方向,所以最近都在做小游戏。后续会再写关于canvas和createjs的系列文章吧,毕竟国内的资料比较少。一旦爱上了canvas,我便逐渐嫌弃DOM了。 360度浏览效果 利用最简单的多张图片,让产品实现360旋转浏览效果。...

前三篇
后三篇