Canvas基础

是九二呀

已于 2024-02-21 23:34:04 修改

阅读量274

点赞数

分类专栏： HTML5+CSS3 HTML+CSS+JavaScript 前端文章标签：前端 html html5

于 2023-06-01 22:29:23 首次发布

本文链接：https://blog.csdn.net/Y9232/article/details/130664658

版权

前端同时被 3 个专栏收录

16 篇文章 0 订阅

订阅专栏

HTML+CSS+JavaScript

14 篇文章 0 订阅

订阅专栏

HTML5+CSS3

7 篇文章 0 订阅

订阅专栏

一、Canvas概述及应用

Canv是HTML5新增专门用来绘制图形的元素。在页面放置一个Canvas元素，相对于在页面放置了一块画布，可以在其中进行图形绘制。Canvas元素只是一块无色透明区域，需要利用JavaScript编写在其中进行绘画的脚本。

1. Canvas概述

HTML5的Canvas元素以及随其而来的编程接口Canvas API应用前景十分广泛，可以应用于炫酷效果、游戏以及各种图形的制作。Canvas元素能够在网页中创建一块矩形区域，这块矩形区域称为画布，在这个区域可以控制任何一个像素，绘制各种图形。

2.创建Canvas的步骤

①使用Canvas标签，创建画布。

<style>
			#mycanvas {
				width: 600px;
				height: 300px;
			}
</style>
<body>
		<canvas id="mycanvas"></canvas>
</body>

此时Canvas的宽是自定义的600px，高是自定义的300px。

②给Canvas添加边框。

<style>
		#mycanvas {
				width: 600px;
				height: 300px;
				border: black 1px solid;
			}
</style>
<body>
		<canvas id="mycanvas"></canvas>
</body>

③使用JavaScript调用Canvas的API接口。

<script>
			var canvas = document.querySelector("mycanvaas");
			/* 通过id获取Canvas元素 */
			var cxt = canvas.getContext("2d");
			/* 使用getContext方法，创建了画布上的笔 */
</script>

二、使用Canvas绘制基本图形

任何事物都是从简单基础的部分开始的，最终形成复杂的庞大的结构。HTML5的Canvas既能实现最简单、最直接的绘图，也能通过编写脚本实现复杂的应用。

1.绘制直线

①使用Canvas对象的getContext（）方法来设置绘图环境（cxt），代码如下：

<script src="">
var mycanvas = document.getElementById("mycanvas");
/* 通过id获取Canvas元素 */
var cxt = mycanvas.getContext("2d");
/* 设置用于画布的绘画环境 */
<script/>

②设置直线的起点和终点坐标，分别使用cxt对象的moveTo方法和lineTo方法设置起点和终点的坐标，然后使用stroke方法将直线画在Canvas区域中，代码如下：

<head>
    <title>绘制直线</title>
    <style>
            #mycanvas
                    {    width:600px;
                         height:300px;
                         border: black1pxsolid;
                    }
    </style>
</head>
<body>
    <canvasid="mycanvas"></canvas>
    <scriptsrc="">varmycanvas =document.getElementById("mycanvas");
    /* 通过id获取Canvas元素 */
    varcxt = mycanvas.getContext("2d");
    /* 设置用于画布的绘画环境 */
    cxt.moveTo(0,0);
    cxt.lineTo(600,300);
    cxt.strokeStyle="#054";
    /* 设置直线的颜色 */
    cxt.lineWidth=5;
    /* 设置直线的粗细 */
    cxt.stroke();
    </script>
</body>

效果图如下：

编辑所绘的直线是5px宽的墨绿色直线，strokeStyle属性设置直线的颜色，lineWidth属性设置直线的粗细。
$\rightarrow$ strokeStyle属性的值和CSS完全相同，可以使用颜色名称，也可以使用十六进制颜色值，或者RGB值、RGBA值。
$\rightarrow$ lineWidth属性用于设置直线的粗细，值越大，线越粗。