canvas在画布上创建空心线条的文字
直接上代码了!!
html代码:
<!DOCTYPE html>
<html>
<head>
<title>鼠标指针实现文字涂鸦</title>
<style type="text/css" media="screen">
#myCanvas{
background-color:lightgrey;
border-radius:5px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width='400' height='250'>
</canvas>
<button id='clearCanvas'>清空画布</button>
</body>
</html>
script代码:
<script src="js/jquery-3.2.1.js"></script>
<script>
$(document).ready(function(){
let myContext = document.getElementById('myCanvas').getContext('2d');
let myClickX = new Array();
let myClickY = new Array();
let myClickDrag = new Array();
let myPaint;
function addClick(x,y,dragging){
myClickX.push(x);
myClickY.push(y);
myClickDrag.push(dragging);
}
function redraw(){
myContext.strokeStyle = 'green';
myContext.lineJoin = 'round';
myContext.lineWidth = 5;
for(let i=0;i<myClickX.length;i++){
myContext.beginPath();
if(myClickDrag[i] && i){
myContext.moveTo(myClickX[i-1], myClickY[i-1])
}else{
myContext.moveTo(myClickX[i]-1,myClickY[i])
}
myContext.lineTo(myClickX[i],myClickY[i]);
myContext.closePath();
myContext.stroke();
}
}
$('#myCanvas').mousedown(function(e){
myPaint = true;
addClick(e.pageX-this.offsetLeft,e.pageY - this.offsetTop);
redraw();
})
$('#myCanvas').mousemove(function(e){
if(myPaint){
addClick(e.pageX-this.offsetLeft,e.pageY - this.offsetTop,true);
}
redraw();
})
$("#myCanvas").mouseup(function(){
myPaint = false;
})
$('#clearCanvas').click(function(){
myContext.fillStyle = 'lightgrey' //设置背景颜色
myContext.fillRect(0,0,400,250) //绘制背景矩形
myClickX=[];
myClickY=[];
myClickDrag=[];
})
})
</script>
画个五角星以及清空画布效果
效果如下
