canvas 绘制虚线

最新推荐文章于 2023-12-02 22:11:05 发布

面条请不要欺负汉堡

最新推荐文章于 2023-12-02 22:11:05 发布

阅读量2.3k

点赞数

分类专栏： html5 文章标签： canvas 绘制虚线 canvas canvas绘制米字格 canvas写字

本文链接：https://blog.csdn.net/gao_xu_520/article/details/60763480

版权

html5 专栏收录该内容

20 篇文章 2 订阅

订阅专栏

一.分析

原理是：求出AB点之间的长度，再设置虚线的长度dashLength，把AB是我长度/虚线长度dashLength 就是虚线数量，根据虚线数量，长度就可以得到当第i个虚线的坐标位置，在使用context.moveTo()和context.lineTo()绘制

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>虚线</title>
</head>
<body>
<canvas id="canvas">您的浏览器不支持canvas</canvas>
<script type="text/javascript">
//1.获取canvas的上下文，
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    canvas.width =800;
    canvas.height =800;
    context.beginPath();
    context.lineWidth =3;
    context.strokeStyle ='blue';
    drawDashedLine(context,0,0,canvas.width, canvas.height, 5);


        //绘制虚线函数
    function drawDashedLine(context, x1, y1, x2, y2, dashLength) {//传入参数：上下文，起点，终点，虚线间隔
        dashLength = dashLength === undefined ? 5 : dashLength;//运用三元表达式实现默认参数
        var deltaX = x2 - x1;//水平长度
        var deltaY = y2 - y1;//垂直长度
        var numDashes = Math.floor(
        Math.sqrt(deltaX * deltaX + deltaY * deltaY) / dashLength);//虚线数量
        for (var i=0; i < numDashes; ++i) {
           context[ i % 2 === 0 ? 'moveTo' : 'lineTo' ]
           (x1 + (deltaX / numDashes) * i, y1 + (deltaY / numDashes) * i);//(deltaX/numDashed)是指虚线的长度
        }
       context.stroke();
    };

</script>
</body>
</html>

绘制虚线会了，接下来我们来绘制米字格

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>米字格</title>
</head>
<body>
<canvas id="canvas">您的浏览器不支持canvas</canvas>
<script type="text/javascript">
//1.获取canvas的上下文，
//2.绘制米子格的矩形 
    var canvasWidth =800;
    var canvasHeight = canvasWidth;
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;
//2.绘制米子格的矩形
drawGrid();  
function drawGrid(){
    context.save();
    context.strokeStyle = "rgb(230,11,9)";
    context.beginPath();
    context.moveTo( 3 , 3 );
    context.lineTo( canvasWidth - 3 , 3 );
    context.lineTo( canvasWidth - 3 , canvasHeight - 3 );
    context.lineTo( 3 , canvasHeight - 3 );
    context.closePath();
    context.lineWidth = 6;
    context.stroke();

    context.beginPath();
    drawDashedLine(context,0,0,canvasWidth, canvasHeight, 8);
    drawDashedLine(context,canvasWidth,0,0, canvasHeight, 8);
    drawDashedLine(context,canvasWidth/2,0,canvasWidth/2, canvasHeight, 8);
    drawDashedLine(context,0,canvasHeight/2,canvasWidth, canvasHeight/2, 8);

    context.restore();
}
//2.1绘制虚线
function drawDashedLine(context, x1, y1, x2, y2, dashLength) {//传入参数：上下文，起点，终点，虚线间隔
    dashLength = dashLength === undefined ? 5 : dashLength;//运用三元表达式实现默认参数
    var deltaX = x2 - x1;//水平长度
    var deltaY = y2 - y1;//垂直长度
    var numDashes = Math.floor(
    Math.sqrt(deltaX * deltaX + deltaY * deltaY) / dashLength);//虚线数量
    for (var i=0; i < numDashes; ++i) {
       context[ i % 2 === 0 ? 'moveTo' : 'lineTo' ]
       (x1 + (deltaX / numDashes) * i, y1 + (deltaY / numDashes) * i);
    }
    context.lineWidth = 1;
   context.stroke();
};
</script>
</body>
</html>

面条请不要欺负汉堡

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
canvas 绘制虚线

一.分析原理是：求出AB点之间的长度，再设置虚线的长度dashLength，把AB是我长度/虚线长度dashLength 就是虚线数量，根据虚线数量，长度就可以得到当第i个虚线的坐标位置，在使用context.moveTo()和context.lineTo()绘制虚线您的浏览器不支持canvas//1.获取canvas的上下文， var c
复制链接

扫一扫