码迷,mamicode.com
首页 > 其他好文 > 详细

关于canvas

时间:2015-09-15 01:32:28      阅读:139      评论:0      收藏:0      [点我收藏+]

标签:

问题分析

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

问题描述

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

原因

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

解决方案

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

通过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的正方形:

技术分享

代码

技术分享
<!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";

效果

技术分享

分析

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

使用js设置画布大小

相关代码

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

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

效果

技术分享

分析

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

关于canvas

标签:

原文地址:http://www.cnblogs.com/dengchangliang/p/4808987.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!