【canvas】canvas实现边框为虚线的三角形

利用canvas实现边框为虚线的三角形

问题描述

在项目中有个需求是要实现一个三角形，三角形的边框为虚线，并且三角形内部有颜色填充；一般可以使用HTML+CSS可以实现三角形，但是这种方法实现的三角形没有边框；所以换一种方法，利用画布Canvas来绘制有边框，且边框样式为虚线的三角形

绘制步骤

1. 创建画布：<canvas></canvas>
2. 准备画笔(获取上下文对象)：canvas.getContext('2d');
3. 设置线条样式：虚实样式、线宽、颜色context.setLineDash()；
4. 开始路径规划：context.beginPath();
5. 确定坐标起始点起始点，移动画笔：context.moveTo(x,y);
6. 绘制线：context.lineTo(x,y);
7. 闭合路径：context.closePath();
8. 绘制路径：context.stroke();
9. 颜色填充：context.fill();

解决方案

1. 准备画布

<canvas id="myCanvas" width="200" height="200"></canvas>

2. 获取画布对象准备画笔

function canvasDraw() {
	// 获取canvas元素并设置绘图上下文
    var canvas = document.getElementById('myCanvas');//获得画布
    var context = canvas.getContext('2d');    //获得上下文
}

canvas.getContext(‘2d’) 中参数为画布种类
2d：执行二维操作
webgl：执行三维操作

3. 确定坐标起始点、路径、虚线样式，开始绘制图形

function canvasDraw() {
	// 获取canvas元素并设置绘图上下文
    var canvas = document.getElementById('myCanvas');//获得画布
    var context = canvas.getContext('2d');    //获得上下文
	
	// 设置虚线样式
    context.setLineDash([5, 4]); // 数组中奇数个数字表示实线部分，偶数个数字表示间隔部分
    context.lineWidth = 3; // 设置线宽
    context.strokeStyle = '#000000'; // 设置线的颜色

    //绘制三角形
    context.beginPath();//开始路径
    context.moveTo(0, 0); //三角形，左顶点
    context.lineTo(0, 150);//右顶点
    context.lineTo(150, 150);//底部的点
    context.closePath();  //结束路径
    context.stroke();  //描边路径
    context.fillStyle = '#ffffff';
    context.fill();
}

实现效果

可以看到三角形的边框和颜色填充都实现了，但是边框部分线条被中间颜色填充覆盖，因此需要用到 Canvas 中的 globalCompositeOperation 合成操作

function canvasDraw() {
	// 获取canvas元素并设置绘图上下文
    var canvas = document.getElementById('myCanvas');//获得画布
    var context = canvas.getContext('2d');    //获得上下文
	
	// 设置虚线样式
    context.setLineDash([5, 4]); // 数组中奇数个数字表示实线部分，偶数个数字表示间隔部分
    context.lineWidth = 3; // 设置线宽
    context.strokeStyle = '#000000'; // 设置线的颜色

    //绘制三角形
    context.beginPath();//开始路径
    context.moveTo(0, 0); //三角形，左顶点
    context.lineTo(0, 150);//右顶点
    context.lineTo(150, 150);//底部的点
    context.closePath();  //结束路径
    context.stroke();  //描边路径
    
    // 设置全局合成操作为“源外”，这样原来的颜色只在路径外部被绘制
    context.globalCompositeOperation = 'destination-atop';
    
    context.fillStyle = '#ffffff';
    context.fill();
}

实现效果

方法总结

function canvasDraw(el,w,h) {
	// 获取canvas元素并设置绘图上下文
    var canvas = document.getElementById(el);//获得画布
    var context = canvas.getContext('2d');    //获得上下文
	
	// 设置虚线样式
    context.setLineDash([5, 4]); // 数组中奇数个数字表示实线部分，偶数个数字表示间隔部分
    context.lineWidth = 3; // 设置线宽
    context.strokeStyle = '#000000'; // 设置线的颜色

    //绘制三角形
    context.beginPath();//开始路径
    context.moveTo(0, 0); //三角形，左顶点
    context.lineTo(0, h);//右顶点
    context.lineTo(w, h);//底部的点
    context.closePath();  //结束路径
    context.stroke();  //描边路径
    
    // 设置全局合成操作为“源外”，这样原来的颜色只在路径外部被绘制
    context.globalCompositeOperation = 'destination-atop';
    
    context.fillStyle = '#ffffff';
    context.fill();
}

canvasDraw('myCanvas', 200, 200)

用来自定义三角形的宽高，其中参数：
el：画布元素ID
w：画布宽
h：画布高

更多实现三角形的方法，css、svg等还可以参考以下文章：
【CSS+Canvas+SVG】前端实现三角形的三种方法