HTML5画布的使用

最新推荐文章于 2024-05-17 15:26:01 发布

努力做一只合格的前端攻城狮

最新推荐文章于 2024-05-17 15:26:01 发布

阅读量2.9k

点赞数 7

分类专栏： CSS 文章标签： 1024程序员节 html5 javascript 前端 html

本文链接：https://blog.csdn.net/shao_xuan_/article/details/120939760

版权

CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

什么是画布

在网页中，我们把用于绘制图形的特殊区域也称为“画布”，网页设计师可以在该区域义绘制自定的图形样式。

画布的使用方法

1、创建画布

使用HTML5中的canvas标签可以在网页中创建画布。
基本语法格式：

<canvas id="画布名称" width="数值" height="数值">
	您的浏览器不支持canvas
</canvas>

2、获取画布

要想在JavaScript中控制画布，首先要获取画布。使用getElementById()方法可以获取网页中的画布对象。
jib语法格式：

var canvas = document.getElementById('cavs');

3、准备画笔

有了画布之后，要开始绘图，还需要准备一只画笔，这支画笔就是context对象。context对象也被称为绘制环境，通过该对象，可以在画布中绘制图形。
基本语法格式：

canvas.getContext('2d');

在JavaScript中，我们通常会定义一个变量来保存获取的context对象。

var context = canvas.getContext('2d');

4、确定初始位置

在绘制图形时，我们首先需要确定从哪里下“笔”，这个下“笔”的位置就是初始位置。在平面中（2d），初始位置可以通过“x，y”的坐标轴来表示。在画布中从最左上角“0，0”开始，x轴向右增大， y轴向下增大。
基本语法格式：

context.moveTo(100,100);

5、连线端点

连线端点用于定义一个端点，并绘制一条从该端点到初始位置的连线。在画布中使用lineTo(x,y)方法来定义连线端点。
基本语法格式：

context.lineTo(100,100);

6、描边

通过初始位置和连线端点可以绘制一条线，但这条线并不能被看到。这时我们需要为线添加描边，让线变得可见。使用画布中的stroke()方法，可以实现线的可视效果。
基本语法格式：

context.stroke();

线的样式

1、宽度

使用画布中的lineWidth属性可以定义线的宽度，该属性的取值为数值（不带单位），以像素为计量。
基本语法格式：

context.lineWidth='10';

2、描边颜色

使用画布中的strokeStyle属性可以定义线的描边颜色，该属性的取值为十六进制颜色值或颜色英文。
基本语法格式：

context.strokeStyle='red';

3、端点形状

默认情况下，线的端点是方形的，通过画布中的lineCap属性可以改变端点的形状。
基本语法格式：

lineCap=’属性值’

属性值	显示效果
butt（默认值）	默认效果，无端点，显示直线方形边缘。
round	显示圆形端点。
square	显示方形端点。

线的路径

1、重置路径

在同一画布中，我们添加再多的连线端点也只能有一条路径，如果想要开始新的路径，就需要使用beginPath()方法，当出现beginPath()即表示路径重新开始。
基本语法格式：

 ctx.beginPath();

2、闭合路径

闭合路径就是将我们绘制的开放路径，进行封闭处理，多点的路径闭合后会形成特定的形状。在画布中，使用closePath()方法闭合路径。
基本语法格式：

ctx.closePath();

3、填充路径

通过填充路径的内容区域生成实心的图形。
基本语法格式：

ctx.fillStyle = '#ff0'
ctx.fill();

圆的绘制方法

在画布中，使用arc()方法可以绘制圆或弧线。
基本语法格式：

arc(x,y,r,开始角,结束角,方向)

x和y： x和y表示圆心在x轴和y轴的坐标位置。
r：表示圆形或弧形的半径，用于确定图形的大小。
开始角：表示初始弧点位置。其中弧点使用数值和“Math.PI”（圆周率，可以理解为180度）表示。
结束角：结束的弧点位置，初始角的设置方式一致。
方向：分为顺时针和逆时针绘。

笑脸图形绘制小练习

效果如下：
在这里插入图片描述
代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="cas" width="400" height="400"></canvas>
    <script type="text/javascript">
    var ctx = document.getElementById("cas").getContext('2d');
    ctx.beginPath();
    ctx.arc(100,100,60,0,2*Math.PI,true);
    ctx.closePath();
    ctx.fillStyle = '#ff0';
    ctx.fill();

    ctx.beginPath();
    ctx.strokeStyle = '#fff';
    ctx.lineWidth = 5;
    ctx.arc(100,110,25,Math.PI/6,5*Math.PI/6,false);
    ctx.stroke();

    ctx.beginPath();
    ctx.strokeStyle = '#fff';
    ctx.lineWidth = 5;
    ctx.arc(70,80,15,Math.PI/400,5*Math.PI/1,true);
    ctx.stroke();

    ctx.beginPath();
    ctx.strokeStyle = '#fff';
    ctx.lineWidth = 5;
    ctx.arc(130,80,15,Math.PI/400,5*Math.PI/1,true);
    ctx.stroke();
    </script>
</body>
</html>

火柴人绘制小练习

效果如下：
在这里插入图片描述
代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="cas" width="1000" height="600"></canvas>
    <script type="text/javascript">
    var ctx = document.getElementById('cas').getContext('2d');

    //头部

    ctx.beginPath();
    ctx.arc(400,110,30,0,2*Math.PI,true);
    ctx.closePath();
    ctx.strokeStyle = '#ff9900';
    ctx.lineWidth = '3';
    ctx.stroke();
    //脖子
    ctx.beginPath();
    ctx.moveTo(400,140);
    ctx.lineTo(400,160);
    ctx.lineWidth = 3;
    ctx.stroke();
    //身体
    ctx.beginPath();
    ctx.moveTo(400,160);
    ctx.lineTo(400,250);
    ctx.lineWidth = 35;
    ctx.stroke();
    //文件夹
    ctx.beginPath();
    ctx.moveTo(350,200);
    ctx.lineTo(350,240);
    ctx.lineTo(450,240);
    ctx.lineTo(450,200);
    ctx.closePath();
    ctx.fillStyle = '#cc3333';
    ctx.fill();
    ctx.lineWidth = 2;
    ctx.stroke();

    //胳膊
    ctx.beginPath();
    ctx.moveTo(400,165);
    ctx.lineTo(450,200);
    ctx.lineTo(400,240);
    ctx.lineWidth = 8;
    ctx.stroke();
    //手掌
    ctx.beginPath();
    ctx.arc(400,240,8,0,2*Math.PI,true);
    ctx.fillStyle = '#ff0';
    ctx.fill();
    //腿部
    ctx.beginPath();
    ctx.moveTo(400,250);
    ctx.lineTo(380,320);
    ctx.lineTo(370,380);
    ctx.lineWidth = 9;
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(400,250);
    ctx.lineTo(420,380);
    ctx.lineWidth = 9;
    ctx.stroke();
    //脚
    ctx.beginPath();
    ctx.arc(360,380,10,0,1*Math.PI,true);
    ctx.closePath();
    ctx.fillStyle = '#ff0'
    ctx.fill();
    ctx.lineWidth = '2';
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(410,380,10,0,1*Math.PI,true);
    ctx.closePath();
    ctx.fillStyle = '#ff0'
    ctx.fill();
    ctx.lineWidth = '2';
    ctx.stroke();

    </script>
</body>
</html>

总结：

画布的使用分为五部：
1、获取画布
2、获取画笔
3、确定起始点
4、确定终点
5、描边

努力做一只合格的前端攻城狮

关注

7
点赞
踩
23

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5画布的使用

HTML5画布的使用什么是画布画布的使用方法1、创建画布2、获取画布3、准备画笔4、确定初始位置5、连线端点6、描边线的样式1、宽度2、描边颜色3、端点形状线的路径1、重置路径2、闭合路径3、填充路径圆的绘制方法笑脸图形绘制小练习火柴人绘制小练习总结：什么是画布在网页中，我们把用于绘制图形的特殊区域也称为“画布”，网页设计师可以在该区域义绘制自定的图形样式。画布的使用方法1、创建画布使用HTML5中的canvas标签可以在网页中创建画布。基本语法格式：<canvas id="画布名称"
复制链接

扫一扫