html中canvas遇到的问题

来源：互联网发布：windows系统模拟器编辑：程序博客网时间：2024/06/06 03:02

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属性来设定高度和宽度。

阅读全文

0 0