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("https://cdn.jxasp.com:9143/image/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的使用

详情内容

相关技术文章

最新源码

下载排行榜

提示信息

选择支付方式