html5 canvas画图

最新推荐文章于 2022-07-15 17:17:09 发布

听風吟

最新推荐文章于 2022-07-15 17:17:09 发布

阅读量190

点赞数

分类专栏： web前端 JavaScript 文章标签： canvas javascript jquery

本文链接：https://blog.youkuaiyun.com/lxlsygxs2017/article/details/116229829

版权

JavaScript 同时被 2 个专栏收录

7 篇文章

订阅专栏

web前端

2 篇文章

订阅专栏

这篇博客介绍了如何使用HTML5的canvas元素来绘制带箭头的直线，并结合JavaScript实现动态计算和绘制。同时，还展示了如何在canvas上绘制实心圆，以及添加文本的方法。这对于前端开发者在网页中创建自定义图形和交互元素具有指导意义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <canvas class="drawLineC" width="410" height="70px" style="border:dashed 2px #CCC;margin-top: 5px">您的浏览器不支持显示该图像,请升级你的浏览器</canvas>
    </div>
</body>
</html>

画图

//区域宽度
var width=document.body.clientWidth*0.85;

var fromX=width/2;//中心点
var lineY=50;//直线y轴
var toX1=2*fromX-5;//向右线x终点
var toX2=5;//向左线x终点
var theta=30;//箭头倾斜角度
var headlen=20;//箭头斜线长度
var lineWidth=3;//线条宽度
var color='#f36';

//画图
var can=$('body').find(".drawLineC")[0];
var ctx=can.getContext('2d');
drawArrow(ctx,fromX,lineY,toX1,lineY,theta,headlen,lineWidth,color);
drawArrow(ctx,fromX,lineY,toX2,lineY,theta,headlen,lineWidth,color);

//画实心圆
var r=8;
drawCir(ctx,fromX,lineY,r,0,2*Math.PI,color);

drawText(ctx,fromX-40,20,'责任心',color);


//写文本
function drawText(ctx,x,y,text,color){
    ctx.beginPath();
    ctx.fillStyle =color;
    ctx.font="20px Arial";
    ctx.fillText(text,x,y);
}

//画实心圆
function drawCir(ctx,x,y,r,start,stop,color){
    ctx.beginPath();
    ctx.strokeStyle=color;
    ctx.lineWidth=2*r;
    ctx.arc(x,y,r,start,stop);//x,y,r,start,stop
    ctx.stroke();
}

//画带箭头直线
function drawArrow(ctx, fromX, fromY, toX, toY,theta,headlen,width,color) {
    theta = typeof(theta) != 'undefined' ? theta : 30;
    headlen = typeof(theta) != 'undefined' ? headlen : 10;
    width = typeof(width) != 'undefined' ? width : 1;
    color = typeof(color) != 'color' ? color : '#000';

    // 计算各角度和对应的P2,P3坐标
    var angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI,
        angle1 = (angle + theta) * Math.PI / 180,
        angle2 = (angle - theta) * Math.PI / 180,
        topX = headlen * Math.cos(angle1),
        topY = headlen * Math.sin(angle1),
        botX = headlen * Math.cos(angle2),
        botY = headlen * Math.sin(angle2);

    ctx.save();
    ctx.beginPath();

    var arrowX = fromX - topX,
        arrowY = fromY - topY;

    ctx.moveTo(arrowX, arrowY);
    ctx.moveTo(fromX, fromY);
    ctx.lineTo(toX, toY);
    arrowX = toX + topX;
    arrowY = toY + topY;
    ctx.moveTo(arrowX, arrowY);
    ctx.lineTo(toX, toY);
    arrowX = toX + botX;
    arrowY = toY + botY;
    ctx.lineTo(arrowX, arrowY);
    ctx.strokeStyle = color;
    ctx.lineWidth = width;
    ctx.stroke();
    ctx.restore();
}

效果图