canvas笔记-lineJoin和miterLimit的使用
生活随笔
收集整理的這篇文章主要介紹了
canvas笔记-lineJoin和miterLimit的使用
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
lineJoin是線條與線條連接時(shí)的效果
lineJoin有如下參數(shù)
miter(default)
bevel
round
下面對(duì)各個(gè)參數(shù)進(jìn)行展示！
默認(rèn)情況下：
源碼如下：
<!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;">當(dāng)前瀏覽器不支持Canvas，請(qǐng)更換瀏覽器后再試 </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>當(dāng)lineJoin為bevel時(shí)
源碼如下：
<!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;">當(dāng)前瀏覽器不支持Canvas，請(qǐng)更換瀏覽器后再試 </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>當(dāng)個(gè)lineJoin為round時(shí)
源碼如下：
<!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;">當(dāng)前瀏覽器不支持Canvas，請(qǐng)更換瀏覽器后再試 </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>這里當(dāng)個(gè)lineJoin為miter時(shí)，一代miterlimit超過(guò)10，就會(huì)默認(rèn)改變?yōu)閎evel。重新設(shè)置如下：
context.miterLimit = 20miterLimit默認(rèn)值為10
miterLimit的值如下：
?
總結(jié)
以上是生活随笔為你收集整理的canvas笔记-lineJoin和miterLimit的使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Linux笔记-rpm与yum的基本概念
- 下一篇： DM工作笔记-查看会话(session)