canvas 设置宽高无效问题

最新推荐文章于 2024-08-22 17:38:39 发布

qq_39906719

最新推荐文章于 2024-08-22 17:38:39 发布

阅读量4.8k

点赞数 1

分类专栏： canvas 文章标签：前端 html5

本文链接：https://blog.csdn.net/qq_39906719/article/details/107691359

版权

canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先，canvas元素默认宽度为300px, 高度为150px，但是在开发过程中发现，直接在canvas标签上设置样式，宽高似乎不太准确

// index.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
		<title></title>
		<link rel="stylesheet" type="text/css" href="./index.css"/>
	</head>
	<body>
		<canvas id="demo" style="width: 200px;height: 100px;border: 1px solid #000000;"></canvas>
		<script src="./index.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

// index.js
var canvas = document.getElementById('demo');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#FF0000';
ctx.fillRect(0, 0, 100, 75);

然而，绘制出来尺寸明显不准确
在这里插入图片描述
可以通过以下方式设置：
方法一：

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

方法二：

var canvas = document.getElementById('demo');
canvas.width = 200;
canvas.height = 100;

qq_39906719

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
canvas 设置宽高无效问题

首先，canvas元素默认宽度为300px, 高度为150px，但是在开发过程中发现，直接在canvas标签上设置样式，宽高似乎不太准确// index.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=n
复制链接

扫一扫

专栏目录