怎么使用Canvas

小灰灰 2020-06-10 13:41 824阅读 0赞

# 怎么使用Canvas

canvas元素只能作为图形的容器; 因此，我们应该使用JavaScript来渲染图形

我们在Canvas上绘制图形，需要首先使用文档对象模型（DOM）进行目标定位。并且，使用id属性将帮助你识别匹配的目标位置。

我们来看一个**canvas元素的代码**

```html
<canvas width="320" height="160" id="canvasExample"></canvas>
```

Canvas元素允许两个特定属性：width和height。

如果不为这两个属性提供值，则Canvas将使用宽度为300像素，高度为150像素的默认值。

该ID属性被用于识别在JavaScript代码Canvas元素。

最初，`<canvas>`元素为空。因此，为了展示某些内容，JavaScript脚本应该在绘制之前获取渲染上下文。

Canvas元素有一个内置的DOM方法，称为getContext。它是一个JavaScript函数，用于访问渲染上下文及其绘图方法。

此函数接受单个参数，通常是2D图形上下文（定义为“2d”）

**例如，要在Canvas上创建矩形形状**，需要以下属性和函数：

fillStyle =“color ” -为矩形添加颜色。

fillRect（x，y，width，height） -绘制一个填充的矩形

strokeRect（x，y，width，height） -给矩形提供了轮廓

clearRect（x，y，width，height） -它清除指定的矩形截面并使其完全透明

为了定义坐标，使用Canvas网格或坐标系。原始尺寸位于Canvas区域的左上角，坐标为（0,0）。

因此，X坐标将向右移动，而Y坐标将向下移动。距离以像素为单位

x给出从左上角到右上角的水平位置

y给出从左上角到下边的垂直位置

width给出矩形的宽度

height给出矩形的高度

具体的代码如下

```html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript HTML5 Canvas Example</title>
</head>
<body onload="canvasExample()">
<canvas width="320" height="160" id="canvasExample"></canvas>
<script>
function canvasExample(){
var canvas = document.getElementById("canvasExample");
if(canvas.getContext){
var context = canvas.getContext('2d');
context.fillStyle = "blue";
context.fillRect(50,50,150,250);
context.clearRect(75,75,100,50);
context.strokeRect(90,90,75,20);
}else{
alert("Please a Canvas-Supporting Web Browser"); 
} 
}
</script>
</body>
</html>
```

浏览器上显示效果如下

![](/images/1591796465394.png)

**以上代码中JavaScript中所实现的是：**

首先通过DOM识别Canvas元素

上下文已定义

fillRect（）函数生成一个150 x 250像素的矩形

然后clearRect（）函数从中心删除一个100 x 50像素的矩形

最后，strokeRect（）函数在清除区域内构造一个75 x 20像素的矩形

发表评论取消回复

表情：

评论列表（有 0 条评论，824人围观）

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

相关阅读

相关 canvas的使用

文章目录一、canvas在移动端自适应大小 canvas坑1：设置canvas的css的宽高会导致你的填充内容被拉伸

「爱情、让人受尽委屈。」/ 2023年07月12日 14:42/ 0 赞/ 4 阅读

相关使用canvas绘制笑脸

笑脸示例代码： <template> <div class="div"> <canvas id="tutorial3" width="15

╰半夏微凉°/ 2022年12月13日 14:27/ 0 赞/ 124 阅读

相关 html5canvas中波浪线怎么画,html5 canvas画波浪

要实现这样的动画普通的CSS3是鞭长莫及了，只能使用Canvas。好在使用canvas也非常简单。 Step1. 新建一个画布()元素，并放在所有按钮和logo的下方以免遮

朴灿烈づ我的快乐病毒、/ 2022年10月12日 01:20/ 0 赞/ 37 阅读

相关 Canvas的使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" />

你的名字/ 2022年08月28日 07:53/ 0 赞/ 105 阅读

相关 Android中canvas.save()和canvas.restore()的使用

自定义控件时常常遇到重写View的Ondraw()方法，Ondraw()方法常常设计到save()和restore()这两个方法.这两个相互匹配出现的，作用是用来保存画布的状态

以你之姓@/ 2022年08月05日 04:18/ 0 赞/ 182 阅读

相关 19_使用canvas元素

html5 <canvas id="canvas" width="1300" style="border: thick doubl

我就是我/ 2022年07月16日 16:28/ 0 赞/ 167 阅读

相关 18_使用canvas元素

html5 <canvas id="canvas" width="1300" style="border: thick doubl

Love The Way You Lie/ 2022年07月16日 16:27/ 0 赞/ 102 阅读

相关使用 canvas 画圆

src="https://mdn.mozillademos.org/zh-CN/docs/learn/JavaScript/Building\_blocks/Looping\_

缺乏、安全感/ 2022年06月03日 09:28/ 0 赞/ 257 阅读

相关 H5使用Canvas绘图

一、什么是Canvas Canvas 是H5的一部分，允许脚本语言动态渲染图像。Canvas 定义一个区域，可以由html属性定义该区域的宽高，javascrip

Love The Way You Lie/ 2022年02月25日 06:04/ 0 赞/ 392 阅读

相关怎么使用Canvas

怎么使用Canvas canvas元素只能作为图形的容器; 因此，我们应该使用JavaScript来渲染图形我们在Canvas上绘制图形，需要首先使用文档对象模型（DO...

小灰灰/ 2020年06月10日 13:41/ 0 赞/ 825 阅读