HTML5 Canvas

雨点打透心脏的1/2处 2023-07-12 14:21 5阅读 0赞

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成

JavaScript 使用 id 来寻找 canvas 元素：

var c=document.getElementById("myCanvas");

然后，创建 context 对象：

var cxt=c.getContext("2d");

getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

cxt.fillStyle="#FF0000";
    cxt.fillRect(0,0,150,75);

fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。fillRect画矩形的四个参数，前两个为起点的坐标，左上角的坐标，后面两个为长宽

#### 实例 - 画线 ####

![在这里插入图片描述][202003090037079.png]  
JavaScript代码：

canvas元素：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
    Your browser does not support the canvas element.
    </canvas>

#### 实例 - 圆形 ####

![在这里插入图片描述][20200309003940698.png]  
JavaScript代码：

canvas元素：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
    Your browser does not support the canvas element.
    </canvas>

#### 实例 - 渐变 ####

![在这里插入图片描述][20200309004211109.png]  
JavaScript代码：

canvas元素：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
    Your browser does not support the canvas element.
    </canvas>

#### 实例 - 图像 ####

javascript代码：

canvas代码：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
    Your browser does not support the canvas element.
    </canvas>

[202003090037079.png]: https://img-blog.csdnimg.cn/202003090037079.png
[20200309003940698.png]: https://img-blog.csdnimg.cn/20200309003940698.png
[20200309004211109.png]: https://img-blog.csdnimg.cn/20200309004211109.png

HTML5 Canvas

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 HTML5 Canvas

相关 html5 -- Canvas

相关 HTML5 Canvas

相关 HTML5：Canvas 标签

相关 html5 canvas word,HTML5 Canvas

相关 html5canvas网格制作,HTML5 Canvas网格变换

相关 HTML5 canvas

相关 html5＜canvas基础＞

相关 HTML5Canvas

相关【HTML5】——Canvas