canvas —— 初识（宽高）

一本正经的柠檬

于 2021-12-21 16:23:08 发布

阅读量899

点赞数

分类专栏： canvas 文章标签： canvas jquery javascript html5

版权

1 篇文章

订阅专栏

本文详细介绍了如何正确设置HTML5 Canvas元素的尺寸，避免拉伸变形。包括直接修改HTML属性、使用JavaScript及jQuery等方法，并对比了不同设置方式的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

重点：Canvas元素有默认的宽高（宽 300px, 高 150px）

【Canvas就像一块面饼，好不容易捏了朵小花，结果你对它拉拉扯扯，一不小心就给扯成了烂菜叶子！v_v】

1. 设置宽高后不会拉伸画布——（正确设置宽高）

方法一：

<canvas width="500" height="500">您的浏览器不支持Canvas</canvas>

方法二：使用HTML5 Canvas API操作

var canvas = document.getElementById('欲操作canvas的id');
canvas.width = 500;
canvas.width = 500;

2. 设置宽高后会拉伸画布——（错误设置宽高）

方法一：css

//包括内联式、外联式、行内式
#canvas的id｛
    width:100px;
    height:100px;
｝

<canvas style="width:100px; height:100px">您的浏览器不支持Canvas</canvas>

方法二：js

var canvas = document.getElementById('canvas的id');
canvas.style.width = "100px";
canvas.style.height = "100px";

方法三：jq

$("#canvas的id").width(500);

方法四：百分数

canvas会将百分数当成数值显示