canvas笔记-lineJoin和miterLimit的使用

lineJoin是线条与线条连接时的效果

lineJoin有如下参数

miter(default)

bevel

round

下面对各个参数进行展示！

默认情况下：

源码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">当前浏览器不支持Canvas，请更换浏览器后再试
</canvas><script>window.onload = function() {let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.lineWidth = 10;drawStar(context, 150, 300, 400, 400, 0);}function drawStar(cxt, r, R, x, y, rot){cxt.beginPath();for(let i = 0; i < 5; i++){cxt.lineTo(Math.cos((18 + i * 72 - rot) / 180 * Math.PI) * R + x,-Math.sin((18 + i * 72- rot) / 180 * Math.PI) * R + y);cxt.lineTo(Math.cos((54 + i * 72 - rot) / 180 * Math.PI) * r + x,-Math.sin((54 + i * 72 - rot) / 180 * Math.PI) * r + y);}cxt.closePath();cxt.stroke();}</script></body>
</html>

当lineJoin为bevel时

源码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">当前浏览器不支持Canvas，请更换浏览器后再试
</canvas><script>window.onload = function() {let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.lineWidth = 10;context.lineJoin = "bevel";drawStar(context, 150, 300, 400, 400, 0);}function drawStar(cxt, r, R, x, y, rot){cxt.beginPath();for(let i = 0; i < 5; i++){cxt.lineTo(Math.cos((18 + i * 72 - rot) / 180 * Math.PI) * R + x,-Math.sin((18 + i * 72- rot) / 180 * Math.PI) * R + y);cxt.lineTo(Math.cos((54 + i * 72 - rot) / 180 * Math.PI) * r + x,-Math.sin((54 + i * 72 - rot) / 180 * Math.PI) * r + y);}cxt.closePath();cxt.stroke();}</script></body>
</html>

当个lineJoin为round时

源码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">当前浏览器不支持Canvas，请更换浏览器后再试
</canvas><script>window.onload = function() {let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.lineWidth = 10;context.lineJoin = "round";drawStar(context, 150, 300, 400, 400, 0);}function drawStar(cxt, r, R, x, y, rot){cxt.beginPath();for(let i = 0; i < 5; i++){cxt.lineTo(Math.cos((18 + i * 72 - rot) / 180 * Math.PI) * R + x,-Math.sin((18 + i * 72- rot) / 180 * Math.PI) * R + y);cxt.lineTo(Math.cos((54 + i * 72 - rot) / 180 * Math.PI) * r + x,-Math.sin((54 + i * 72 - rot) / 180 * Math.PI) * r + y);}cxt.closePath();cxt.stroke();}</script></body>
</html>

这里当个lineJoin为miter时，一代miterlimit超过10，就会默认改变为bevel。重新设置如下：

context.miterLimit = 20

miterLimit默认值为10

miterLimit的值如下：

canvas笔记-lineJoin和miterLimit的使用相关推荐

html5 canvas修改颜色,html5 canvas 笔记二（添加样式和颜色）
色彩 Colors fillStyle = color设置图形的填充颜色.strokeStyle = color设置图形轮廓的颜色. 透明度 Transparency globalAlpha = tr ...
html5菜鸟教程canvas笔记
简单介绍: canvas(图形容器) 标签是一个默认没有边框和内容的矩形画布,并且通过js实现绘制,js脚本先获取标签的id然后进行控制canvas,比如:1. <canvas id=" ...
canvas笔记-画一片星空
程序运行截图如下: 源码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
html语言填充没有只有描边,HTML5 Canvas笔记——交互绘制文本（描边、填充、阴影、渐变填充、图案填充、文本的属性设置）...
(1)文本的描边.填充.阴影 (2)文本的渐变填充 (3)文本的图案填充 (4)文本的属性设置及效果呈现交互绘制文本.html 交互绘制文本 body { background: #eeeeee; ...
html5 canvas 笔记五（合成与裁剪）
组合 Compositing globalCompositeOperation syntax: globalCompositeOperation = type 注意:下面所有例子中,蓝色方块是先绘制的 ...
canvas笔记-画三角形并计算其外心（含算法其他绘图框架类似）
程序运行截图如下: 源码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
canvas笔记-文本（fillText）旋转（rotate）
这里fillText直接使用rotate会有问题.估计是旋转中心有问题. 正确的逻辑为: 先使用translate移动中心点在文本起始位置,如何在0,0处fillText即可. 如果要在字符串中心进行 ...
canvas笔记-canvas加载图片及放缩及加水印(两canvas同时使用)
首先是图片放缩程序运行截图如下: 拉动滑动条: 源码如下: <!DOCTYPE html> <html lang="en"> <head>&l ...
canvas笔记-canvas中用户与图形交互
运行截图如下: 点击某个圆后: 代码如下: <!DOCTYPE html> <html lang="en"> <head><meta ch ...

canvas笔记-lineJoin和miterLimit的使用

canvas笔记-lineJoin和miterLimit的使用相关推荐

最新文章

热门文章