首页 前端知识 【HTML5】 canvas 绘制图形

【HTML5】 canvas 绘制图形

2024-04-29 11:04:14 前端知识 前端哥 138 792 我要收藏

文章目录

    • 一、基本用法
    • 二、用法详见
      • 2.0、方法属性
      • 2.1、绘制线条
      • 2.2、绘制矩形
      • 2.3、绘制圆形
      • 2.4、绘制文本
      • 2.5、填充图像

一、基本用法

  • canvas 标签:可用于在网页上绘制图形(使用 JavaScript 在网页上绘制图像)
  • 画布是一个矩形区域,通过控制其每一像素绘制路径、矩形、圆形、字符以及添加图像。
  • 创建一个canvas:width 和 height 是必备属性,id 是为了在 js 中获取改元素。
<canvas id="myCanvas" width="200" height="100"></canvas>
  • 在 js 中绘制 canvas
<script type="text/javascript">
// 通过 id 查找到 canvas 元素
var c = document.getElementById("myCanvas");
// 创建 context 对象
var cxt = c.getContext("2d");
// 绘制矩形(前2个参数为在canvas里面的矩形左上角起点坐标,第3个参数是宽,第4个参数是高)
cxt.fillRect(0,0,150,75);
// 填充颜色
cxt.fillStyle="#FF0000";
</script>

二、用法详见

2.0、方法属性

  • context 对象属性
属性描述
fillStyle设置或返回用于填充绘图的颜色、渐变或图案。
strokeStyle设置或返回用于笔划的颜色、渐变或图案。
shadowColor设置或返回用于阴影的颜色。
shadowBlur设置或返回阴影的模糊级别。
shadowOffsetX设置或返回阴影到形状的水平距离。
shadowOffsetY设置或返回阴影到形状的垂直距离。
  • context 对象方法
方法描述
fill()填充当前图形(路径)。
stroke()实际上绘制您定义的路径。
beginPath()开始路径,或重置当前路径。
closePath()创建从当前点返回起点的路径。

2.1、绘制线条

  • 线条方法
方法描述绘制
moveTo()划线起始点
lineTo()画线到另一个点
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
// 通过 id 查找到 canvas 元素
var c = document.getElementById("myCanvas");
// 创建 context 对象
var cxt = c.getContext("2d");
// 线条起点坐标
cxt.moveTo(10,10);
// 折点坐标
cxt.lineTo(150,50);
// 折点坐标
cxt.lineTo(10,50);
// 绘制当前或已经存在的路径的方法
cxt.stroke();
</script>

在这里插入图片描述

  • 专有属性
属性描述
lineWidth绘制时要使用的线条宽度像素
lineCap定义线的端部样式round(圆形) square(方形)、butt(平直,默认值)
lineJoin设置或返回两条线相交时创建的角的类型bevel(斜角)、round(圆角) miter(尖角,默认值)
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.strokeStyle = "red";
ctx.lineCap = "round";
ctx.stroke();

2.2、绘制矩形

  • fillRect() 方法:向路径添加一个填充的矩形 context.fillRect(x, y, width, height)
  • strokeRect() 方法:向路径添加一个无填充矩形 context.fillRect(x, y, width, height)
  • rect() 方法:向路径添加一个矩形 context.rect(x, y, width, height)
1. strokeRect(30, 30, 50, 50) 
等价于:
	ctx.rect(30, 30, 50, 50);
	ctx.stroke();
2. fillRect(30, 30, 50, 50) 
等价于:
	ctx.rect(30, 30, 50, 50);
	ctx.fill();
参数描述
x矩形左上角的 x 坐标。
y矩形左上角的 y 坐标。
width矩形的宽度,以像素为单位。
height矩形的高度,以像素为单位。
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// 红色矩形
ctx.beginPath();
ctx.lineWidth = "6";
ctx.strokeStyle = "red";
ctx.fillStyle = "yellow"	// 在 strokeRect 中不生效
ctx.strokeRect(5, 5, 290, 140);

// 绿色矩形
ctx.beginPath();
ctx.lineWidth = "4";		// 在 fillRect 中不生效
ctx.strokeStyle = "green";	// 在 fillRect 中不生效
ctx.fillStyle = "yellow"
ctx.fillRect(30, 30, 50, 50);

在这里插入图片描述

2.3、绘制圆形

  • arc() 方法:向路径添加一个圆形 context.arc(x,y,r,start,end)
参数描述
x圆心的x轴坐标
y圆心的y轴坐标
r圆弧的半径
start圆弧的起始点
end圆弧的终点
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
// 通过 id 查找到 canvas 元素
var c = document.getElementById("myCanvas");
// 创建 context 对象
var cxt = c.getContext("2d");
// 填充颜色
cxt.fillStyle="#FF0000";
// 创建一个新的路径
cxt.beginPath();
// 绘制圆弧路径的方法(圆心的x轴坐标,圆心的y轴坐标,圆弧的半径,圆弧的起始点,圆弧的终点,true逆时针绘制圆弧false顺时针绘制)
cxt.arc(70,18,15,0,Math.PI*2,true);
// 返回到当前路径起始点的方法
cxt.closePath();
// 填充当前或已存在的路径的方法
cxt.fill();
</script>

在这里插入图片描述

2.4、绘制文本

  • fillText(text,x,y):在画布上绘制“填充的”文本
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

在这里插入图片描述

  • strokeText(text,x,y):在画布上绘制文本(无填充)
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);

在这里插入图片描述

  • 专有属性:
属性描述
font设置或返回文本内容的当前字体属性。
textAlign设置或返回文本内容的当前对齐方式。
textBaseline设置或返回绘制文本时使用的当前文本基线。
  • font 属性:使用的语法与 CSS font 属性相同。

  • textAlign 属性
    在这里插入图片描述

描述
start默认。文本在指定的位置开始。
end文本在指定的位置结束。
center文本的中心被放置在指定的位置。
left文本左对齐。
right文本右对齐。
  • textBaseline 属性
    在这里插入图片描述
描述
alphabetic默认。文本基线是普通的字母基线。
top文本基线是 em 方框的顶端。
hanging文本基线是悬挂基线。
middle文本基线是 em 方框的正中。
ideographic文本基线是表意基线。
bottom文本基线是 em 方框的底端。

2.5、填充图像

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
// 通过 id 查找到 canvas 元素
var c = document.getElementById("myCanvas");
// 创建 context 对象
var cxt = c.getContext("2d");
var img = document.getElementById("scream");
// 放置图片 (图片,image的左上角在目标画布上X轴坐标,image的左上角在目标画布上Y轴坐标)
ctx.drawImage(img, 10, 10)
</script>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/6283.html
标签
canvas
评论
发布的文章

HTML5本地存储

2024-05-06 09:05:10

HTML5和CSS3新特性

2024-04-16 17:04:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!