html5 canvas drawing

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>

Draw a picture

//区域宽度
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();
}

renderings

html5 canvas drawing

Guess you like