canvas笔记-lineCap的使用

在画线时canvas有一个属性：

lineCap可填写3个参数：

butt(default)

round

square

程序运行截图如下：

源码如下：

<!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 = 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>

这个只能作为开始和结尾处。

canvas笔记-lineCap的使用相关推荐

html5 canvas修改颜色,html5 canvas 笔记二（添加样式和颜色）
色彩 Colors fillStyle = color设置图形的填充颜色.strokeStyle = color设置图形轮廓的颜色. 透明度 Transparency globalAlpha = tr ...
canvas的lineCap线段端点模样和 lineJoin线段连接处模样
lineCap 设置线段端点显示的模样.它可以为下面的三种的其中之一:butt,round 和 square,默认是 butt. window.onload=function(){var canvas ...
html5菜鸟教程canvas笔记
简单介绍: canvas(图形容器) 标签是一个默认没有边框和内容的矩形画布,并且通过js实现绘制,js脚本先获取标签的id然后进行控制canvas,比如:1. <canvas id=" ...
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笔记-lineCap的使用

canvas笔记-lineCap的使用相关推荐

最新文章

热门文章