html5 canvas绘制图形和线段

℡啨天丶

已于 2022-08-08 09:56:59 修改

阅读量291

点赞数

分类专栏： HTML5必拿下文章标签： servlet javascript java

于 2022-08-08 09:45:09 首次发布

本文链接：https://blog.csdn.net/m0_65037325/article/details/125581697

版权

canvas小案例绘制图形和线段

canvas 使用

canvas绘制图形样例：

绘制线段样例（html和css代码像上面就可以，这里只保存js）：

绘制三角形（html和css代码像上面就可以，这里只保存js）：

canvas小案例绘制图形和线段

想了解更全面的canvas API可以点击右侧: canvas简介及常用API

canvas 使用

canvas 标签在页面只显示一个设定背景颜色画布，如果需要需要产生新内容或者进行画图操作，需要借助canvas API（HTML5 的内置对象context）和JavaScript操作实现画图或者其他图像操作。

<canvas id="mycanvas" width="300" height="300">
			您的浏览器不支持canvas标签
</canvas>

如下图所示，canvas元素默认被网格所覆盖。通常来说网格中的一个单元相当于canvas元素中的一像素。

canvas绘制图形样例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				background-color: #99CCFF;
			}

			#canvas {
				background-color: #fff;
				border: 1px salmon solid;
				/*  
					css可以设置width 和height 但是不建议使用cs

最低0.47元/天解锁文章

℡啨天丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
html5 canvas绘制图形和线段

canvas 标签在页面只显示一个设定背景颜色画布，如果需要需要产生新内容或者进行画图操作，需要借助canvas API（HTML5 的内置对象context）和JavaScript操作实现画图或者其他图像操作。制作整理不易，以上内容均为原创（参考了部分官方文档和老师整理的案例）。如要引用请附上本文链接，如有疑问可以在评论区畅所欲言，作者看到会第一时间回复，欢迎交流！通常来说网格中的一个单元相当于canvas元素中的一像素。想了解更全面的canvas API可以点击右侧: canvas简介及常用API。..
复制链接

扫一扫