canvas笔记-lineCap的使用
生活随笔
收集整理的這篇文章主要介紹了
canvas笔记-lineCap的使用
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
在畫線時canvas有一個屬性：
lineCap可填寫3個參數(shù)：
butt(default)
round
square
程序運(yù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，請更換瀏覽器后再試 </canvas><script>window.onload = function() {let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.lineWidth = 50;context.strokeStyle = "#005588";context.beginPath();context.moveTo(100, 200);context.lineTo(700, 200);context.lineCap = "butt";context.stroke();context.beginPath();context.moveTo(100, 400);context.lineTo(700, 400);context.lineCap = "round";context.stroke();context.beginPath();context.moveTo(100, 600);context.lineTo(700, 600);context.lineCap = "square";context.stroke();context.lineWidth = 1;context.strokeStyle = "#27a";context.moveTo(100, 100);context.lineTo(100, 700);context.moveTo(700, 100);context.lineTo(700, 700);context.stroke();}</script></body> </html>這個只能作為開始和結(jié)尾處。
?
總結(jié)
以上是生活随笔為你收集整理的canvas笔记-lineCap的使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： cuda笔记-流的使用（定义、创建、消耗
- 下一篇： Java笔记-解决Cause: java