HTML5画布（canvas）绘制三角形，矩形，圆形

最新推荐文章于 2024-04-15 07:51:21 发布

空谷丶幽兰

最新推荐文章于 2024-04-15 07:51:21 发布

阅读量9.3k

点赞数 11

分类专栏： HTML

本文链接：https://blog.csdn.net/yangaoyuan1999/article/details/108875296

版权

本文介绍了HTML5的canvas元素，讲解如何通过JavaScript获取画布并准备画笔，包括设置坐标起始点、绘制线条、定义路径、描边等基本操作。接着详细阐述了如何绘制三角形、矩形和圆形，提供了具体的代码示例，帮助读者掌握canvas图形绘制技巧。

摘要由CSDN通过智能技术生成

canvas标签：

<canvas id="cavsElem"  width="400" height="300">您的浏览器不支持canvas</canvas>

	1.定义id属性是为了在JavaScript代码中引用元素
	2.标签中间的文字在浏览器不支持canvas的情况下才会显示
	3.canvas标签与img标签一样，有两个原生属性width和height
	  默认300*500像素
	4.不要用css控制它的宽和高，否则可能会引起画布上的图形变形

要在画布中绘制图形，首先要通过JavaScript的getElementById()函数
获取到网页中的画布对象
var canvas =document.getElementById(‘cavsElem’);

注：canvas画布默认为透明，背景色可以定义

准备画笔：

有了画布之后，开始作画需要准备画笔，这只画笔就是context对象，
context对象是画布的上下文，也叫作绘制环境，是所有的绘制操作API的
入口，该对象可以使用JavaScript脚本获得

	var context=canvas.getContext('2d');
	参数2d代表画笔的种类，这里用来执行二维操作,把参数替换为webgl，执行三维操作

坐标起始点：

	var context=canvas.getContext('2d');
	context.moveTo(x,y);
    上述x,y都是相对于画布的最左上角，使用context对象的moveTo()方法
    进行设置，相当于移动画笔到某个位置

绘制线条：

在canvas中使用lineTo()方法绘制直线：
context.lineTo(x,y);
"x,y"为线头点坐标，lineTo( )方法用于定义从x,y的位置绘制一条直线
到起点或者上一个线头点

路径：

路径是所有图形绘制的基础，例如绘制直线确定了起始点和线头点，便形成了一条绘制路径，如果绘制复杂路径，必须使用开始路径和闭合路径的方法

	context.beginPath();     //开始路径
	context.closePath();	 //闭合路径

开始路径的核心作用是将不同线条绘制的形状进行隔离，每次执行此方法
表示重新绘制一个路径，同之前绘制的路径可以分开样式设置和管理
闭合路径会自动把最后的线头和开始的线头连在一起

描边：

在canvas图形绘制中，路径只是草稿，真正的绘制先必须执行stroke()方法
根据路径进行描边

		context.storke();

利用Canvas绘制一个图形，基本步骤：

	1.创建画布：<canvas></canvas>
	2.准备画笔(获取上下文对象):canvas.getContext('2d');
	3.开始路径规划：context.beginPath();
	4.移动起始点：context.moveTo(x,y);
	5.绘制线(矩形，圆形，图片...)：context.lineTo(x,y)
	6.闭合路径:context.closePath();
	7.绘制路径：context.stroke();

绘制三角形：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="cavsElem">
        您的浏览器不支持，请升级浏览器
    </canvas>
    <script>
        var canvas=document.getElementById(

最低0.47元/天解锁文章

空谷丶幽兰

关注

11
点赞
踩
31

收藏

觉得还不错? 一键收藏
1
评论
HTML5画布（canvas）绘制三角形，矩形，圆形

canvas标签：<canvas id="cavsElem" width="400" height="300">您的浏览器不支持canvas</canvas> 1.定义id属性是为了在JavaScript代码中引用元素 2.标签中间的文字在浏览器不支持canvas的情况下才会显示 3.canvas标签与img标签一样，有两个原生属性width和height 默认300*500像素 4.不要用css控制它的宽和高，否则可能会引起画布上的图形变形要在画布中绘
复制链接

扫一扫

专栏目录