HTML5学习第15篇——canvas之线条样式

最新推荐文章于 2024-07-18 22:41:28 发布
最新推荐文章于 2024-07-18 22:41:28 发布
阅读量712 收藏 3
点赞数
分类专栏： # HTML5 文章标签： canvas 线条 lineCap lineJoin
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37617778/article/details/84900459
版权

canvas线条样式练习：

lineCap

设置或返回线条末端线帽的样式。

值描述
butt默认。向线条的每个末端添加平直的边缘。
round向线条的每个末端添加圆形线帽。
square向线条的每个末端添加正方形线帽。

 提示："round" 和 "square" 会使线条略微变长。


lineJoin        

设置或返回两条线相交时，所创建的拐角类型

值描述
bevel创建斜角。
round创建圆角。
miter默认。创建尖角。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>canvas 线条显示</title>
	<style type="text/css">
		canvas{
			border:1px solid red;
		}
	</style>
</head>
<body>
	<canvas width="600" height="300"></canvas>
	<script type="text/javascript">
		var c = document.querySelector('canvas');
		var ctx = c.getContext("2d");

		//lineCap设置或返回线条末端线帽的样式。
		/*butt	默认。向线条的每个末端添加平直的边缘。
		  round	向线条的每个末端添加圆形线帽。
		  square向线条的每个末端添加正方形线帽。
		  提示："round" 和 "square" 会使线条略微变长。
		*/

		//lineJoin设置或返回两条线相交时，所创建的拐角类型
		/*
			bevel	创建斜角。
			round	创建圆角。
			miter	默认。创建尖角。
		*/

		//绘制第1个大于号图形 >
		ctx.moveTo(100,100);
		ctx.lineTo(200,150);
		ctx.lineTo(100,200);

		ctx.lineCap = "butt";//默认 平直的边缘
		ctx.lineJoin = "miter";//默认尖角

		ctx.lineWidth = 10;
		ctx.strokeStyle = "red";
		ctx.stroke();

		ctx.beginPath();

		//绘制第2个大于号图形 >
		ctx.moveTo(250,100);
		ctx.lineTo(350,150);
		ctx.lineTo(250,200);

		ctx.lineCap = "round";// 圆形线帽
		ctx.lineJoin = "round";//圆角

		ctx.lineWidth = 10;
		ctx.strokeStyle = "green";
		ctx.stroke();

		ctx.beginPath();

		//绘制第3个大于号图形 >
		ctx.moveTo(400,100);
		ctx.lineTo(500,150);
		ctx.lineTo(400,200);

		ctx.lineCap = "square";//默认 正方形线帽
		ctx.lineJoin = "bevel";//默认斜角

		ctx.lineWidth = 10;
		ctx.strokeStyle = "blue";
		ctx.stroke();
	</script>
</body>
</html>

示例效果：

水晶果冻1125
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5 进阶（6）——Canvas绘图基础（坐标体系、绘图、描边、填充、转换、渐变、文本、动画）
weixin_39141044的博客
10-15 9021
一、canvas基本使用 1.1 canvas元素 &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;canvas&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;元素只有两个属性width、height，当没有设置width、height时，&amp;amp;a
【HTML5】——Canvas
袅袅青烟散的博客
10-09 448
Canvas是HTML5中所有新特性中目前应用最广泛的一个，可以替代引入的图片（图形） 用途：完成HTML页面中的图形绘制，实现网络游戏或单击游戏（网页游戏），在HTML中绘制图标 目前主流的游戏引擎：白鹭引擎、Cocos注意：Canvas作为HTML页面的元素出现，在Canvas绘制的图形与HTML页面是无关的，即不能使用DOM和事件绑定目录1.Canvas元素 2.绘制矩形 3.填充、描
2024年最全html5基础入门教程之canvas运用样式与颜色，五面阿里拿下飞猪事业部offer
2401_84438160的博客
05-07 1053
为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。前端面试题汇总开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】JavaScript性能linux。
html5新特性之应用——使用canvas画画
SaRAku的博客
04-10 449
1、做一个canvas并生成2d画布 <canvas id="canvas" style="width: 300px;height: 300px;"></canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var ctx ...
html5——canvas画布
weixin_33752045的博客
03-31 92
一、基本介绍 1，canvas是画布，可以描画线条，图片等，现代的浏览器大部分都支持。 canvas的width，height默认为300*150，要指定画布大小，不能用css样式的widh，height。只能在html标签中指定，或是用js对canvas对象设置。 &lt;canvas id="wfPicture" width=300px; height=300px;&...
HarmonyOS Next开发学习手册——Canvas组件开发(CanvasRenderingContext2D对象)
最新发布
maniuT的博客
07-18 553
使用CanvasRenderingContext2D在Canvas画布组件上进行绘制，绘制对象可以是图形、文本、线段、图片等。
HTML5之Canvas绘图——使用Canvas绘制图形
csdn_chenli
06-16 991
HTML5之Canvas绘图——使用Canvas绘制图形的基本教程 HTML5火的正热，最近有个想法也是要用到HTML的相关功能，所以也要好好学习一把。 好好看了一下Canvas的功能，感觉HTML5在客户端交互的功能性越来越强了，今天看了一下Canvas绘图，下边是几个实例，记下以备后用。 Canvas绘制一个加载的动画图片
前端可视化——Canvas
mapbar_front的博客
03-12 7902
Canvas 基本使用 <canvas id="tutorial" width="300" height="300"></canvas> 1、canvas元素替换内容。 使用文本的方式 <canvas>你的浏览器不支持 canvas，请升级你的浏览器。</canvas> 使用图片的方式 <canvas><img src=...
Web前端学习笔记——Canvas 02
唯恋殊雨的博客
03-23 878
三、 canvas进阶3.1 Canvas颜色样式和阴影3.1.1 设置填充和描边的颜色（掌握）fillStyle : 设置或返回用于填充绘画的颜色strokeStyle: 设置或返回用于笔触的颜色以上两个值都可以接受颜色名,16进制数据，rgb值，甚至rgba. 一般先进行设置样式然后进行绘制。例如： ctx.strokeStyle = "red"; ctx.strokeStyle ...
Web前端学习笔记——Canvas
weixin_30951389的博客
08-06 126
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border:...
HTML5学习第6篇—video：自己实现video的播放控件（添加样式版）
热门推荐
李小白的博客
11-25 1万+
     本篇博客接着上一篇文章，实现了一个带样式的video播放控件，代码如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;video control&lt;/title&gt; &lt;link
HTML5学习第4篇——HTML5元素分类及各元素简介
李小白的博客
09-30 2837
HTML5元素分类 html5元素分类图： 1.结构性元素 article与section 元素名称 元素释义 特点 article 用来表示文档、页面中独立的、完整的、可以独自被外部引用的内容 article元素是一段独立完整的内容，通常组成=header+内容+footer，例如：博客或一篇文章、一篇论坛帖子 section 用于对网站和应用程序中页面上的内容进行分区...
HTML5学习第14篇——canvas之画布平移translate
李小白的博客
12-08 2339
canvas画布平移的方法是translate(x轴平移坐标，y轴平移坐标)，画布原点平移。 示例代码如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;画布平移 translate&lt;/title&gt;
HTML5之Canvas绘图——Canvas画布调整之移动、缩放、旋转
05-24
Canvas是HTML5新增的一个用于绘制图形的标签，可以通过JavaScript来控制Canvas进行图形的绘制。在进行Canvas绘制时，可以通过调整画布的位置、大小和旋转角度等属性，来控制绘制出来的图形的位置和形态。 下面我们就来介绍一下Canvas画布的移动、缩放和旋转： 1. 画布移动 画布移动可以通过Canvas提供的translate方法来实现。translate方法接收两个参数，分别表示x轴和y轴方向上的偏移量。偏移量为正值表示向右或向下移动，为负值表示向左或向上移动。 例如，我们可以通过下面的代码将画布向右移动50个像素，向下移动100个像素： ``` context.translate(50, 100); ``` 2. 画布缩放 画布缩放可以通过Canvas提供的scale方法来实现。scale方法接收两个参数，分别表示x轴和y轴方向上的缩放比例。缩放比例为大于1的值表示放大，小于1的值表示缩小。 例如，我们可以通过下面的代码将画布在x轴和y轴方向上都放大2倍： ``` context.scale(2, 2); ``` 3. 画布旋转 画布旋转可以通过Canvas提供的rotate方法来实现。rotate方法接收一个参数，表示旋转的角度，单位为弧度。 例如，我们可以通过下面的代码将画布旋转45度： ``` context.rotate(Math.PI / 4); ``` 需要注意的是，Canvas绘图的坐标系原点默认在画布的左上角，而移动、缩放和旋转操作都是相对于原点进行的。因此，在进行这些操作时，需要先将画布的原点移动到需要的位置，再进行操作。例如，如果需要将画布向右移动50个像素，需要先将原点移动到（50，0）的位置，再进行移动操作： ``` context.translate(50, 0); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值