一.线型知识

lineWidth属性： 设置线的粗细，属性值必须是数字，默认是1且没有单位。

lineCap属性的作用： 绘制线段末端。

lineCap有3个属性值：

butt:线段末端以方形结束。

round：线段末端以圆形结束。

square：线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度的一半的矩形区域。

图形参考网址：

https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineCap

lineJoin属性的作用：设置图形中两段连接处所显示的样子。

lineJoin有3个属性值：

bevel：效果是平的。

round：效果是圆的。

miter：效果是尖的。它是默认的。

setLineDash([参数1，参数2]);

参数1：虚线的长度。

参数2：虚线之间的距离。

注意事项：这个方法可以传入好多的参数。

setLineDash([参数1,参数2,参数3，参数4...]);

参数1,2,3,4…是按照 “ 虚线的长度,虚线之间的距离,虚线的长度,虚线之间的距离… ” 的规律进行设置的。

二.图案V的案例

1.源码

<!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>图案V</title><style>canvas{border: 1px solid black;}</style>
</head>
<body><canvas width="600" height="400" id="myCanvas"></canvas>
</body>
</html>
<script>var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");// 图案Vctx.beginPath();ctx.moveTo(100,100);ctx.lineTo(200,200);ctx.lineTo(300,100);ctx.lineWidth = 20; ctx.lineCap = "butt"; ctx.stroke();
</script>

2.效果图

三.虚线案例

1.源码

<!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>线型的属性</title><style>canvas{border: 1px solid black;}</style>
</head>
<body><canvas width="600" height="400" id="myCanvas"></canvas>
</body>
</html>
<script>var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");ctx.setLineDash([14,12]);  //设置虚线ctx.strokeRect(120,120,100,100); //绘制矩形边框ctx.lineDashOffset = 10;  //设置虚线起始的偏移量ctx.moveTo(0,100);ctx.lineTo(400,100);ctx.stroke();
</script>

2.效果图

篇章

上一篇：canvas教程8-小球连线之碰壁则返

下一篇：canvas教程10-绘制文本

canvas教程9-线型的属性相关推荐

canvas教程大纲
文章目录 canvas教程1-canvas的基本使用 canvas教程2-canvas的编程思想 canvas教程3-用面向对象思维来实现动画 canvas教程4-canvas的绘制功能 canvas ...
canvas教程10-绘制文本
文章目录一.绘制文本二.源码三.效果图篇章一.绘制文本 font属性:可以设置字体的大小和字体名称. fillText方法的作用:填充文字. ctx.fillText("我是微软雅 ...
canvas教程8-小球连线之碰壁则返
文章目录一.反弹球的无规则运动与连线二.效果图篇章一.反弹球的无规则运动与连线 <!DOCTYPE html> <html lang="en"> & ...
canvas教程1-canvas的基本使用
文章目录一.canvas的简介二.源码三.效果图四.知识点总结篇章一.canvas的简介一直以来,web上的动画都是flash实现的,例如,广告.游戏等. flash是有缺点的,例如我们 ...
canvas mdn_MDN文档 canvas教程笔记
MDN Canvas教程 API CanvasRenderingContext2D即canvas.getContext('2d')返回的对象类型,几乎所有作图操作基于这个"上下文对象&q ...
canvas教程11-渐变
文章目录一.渐变 1.线型渐变 2.径向渐变二.源码 1.线型渐变 2.径向渐变三.效果图 1.线型渐变 2.径向渐变篇章一.渐变渐变有两种方式,一种是线型渐变,一种是径向渐变. 1.线型 ...
canvas教程14-资源管理器
文章目录一.资源管理器二.源码三.效果图篇章一.资源管理器资源管理器:在开发游戏的时候,静态资源是需要请求回来的. 如果游戏直接开始(静态资源没有被请求回来),那么网页可能会报错.空白等现 ...
html2canvas教程_HTML5 Canvas教程：简介
html2canvas教程 Interested in CSS animation? Check out Creating Animations with CSS, a complete course ...
canvas教程4-canvas的绘制功能
文章目录一.canvas的绘制功能二.源码篇章一.canvas的绘制功能填充矩形的颜色:fillStyle属性. 填充矩形:fillRect方法. 绘制矩形边框的颜色:strokeStyle ...

canvas教程9-线型的属性

文章目录

一.线型知识

二.图案V的案例

1.源码

2.效果图

三.虚线案例

1.源码

2.效果图

篇章

canvas教程9-线型的属性相关推荐

最新文章

热门文章