html中canvas遇到的问题

最新推荐文章于 2023-05-18 15:09:37 发布

我是大魔王2

最新推荐文章于 2023-05-18 15:09:37 发布

阅读量1k

点赞数

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

本文链接：https://blog.csdn.net/mylovewanzi/article/details/75392489

版权

html5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML5 Canvas

<canvas> 标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。

在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。

什么是 Canvas?

HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。

创建一个画布（Canvas）

一个画布在网页中是一个矩形框，通过 <canvas> 元素来绘制.

注意: 默认情况下 <canvas> 元素没有边框和内容。

<canvas>简单实例如下:

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

注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.

提示:你可以在HTML页面中使用多个 <canvas> 元素.

使用 style 属性来添加边框:

那么问题就来了？我发现当我们使用style属性来设置画布的width 和 height时会出现好奇怪的错误？

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
<canvas id="myCanvas" height="200px" width="200px" style="border: 1px solid red"></canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.moveTo(0,0);
    ctx.lineTo(200,200);
    ctx.stroke();
</script>
</body>
</html>

运行后的结果如下：

现在我将画布的width 和 height用style属性来设置，代码改动后如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
<canvas id="myCanvas"  style="border: 1px solid red;width: 200px;height: 200px"></canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.moveTo(0,0);
    ctx.lineTo(200,200);
    ctx.stroke();
</script>
</body>
</html>

改动后的代码运行后的效果如下，发现这样写代码达不到我们想要想要的结果。

结论：canvas 元素的高度和宽度，应该通过height 和width属性来设定，而不应该通过style属性来设定高度和宽度。

我是大魔王2

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html中canvas遇到的问题

HTML5 Canvas 标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。什么是 Canvas?HTML5 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成. 标签只是图形容器，您必须使用脚本来绘制图形。你可以通过
复制链接

扫一扫

专栏目录