canvas画图：用鼠标---画曲线，直线，矩形，圆

来源：互联网发布：spark 运行tensorflow 编辑：程序博客网时间：2024/05/22 01:32

<canvas id="canvas" width="800" height="500"></canvas><script src="js/jquery-3.2.1.min.js"></script>

var canvas = document.getElementById('canvas'); // 得到画布var ctx = canvas.getContext('2d'); // 得到画布的上下文对象var flag = false;var x = 0; // 鼠标开始移动的位置Xvar y = 0; // 鼠标开始移动的位置Yvar url = ''; // canvas图片的二进制格式转为dataURL格式/* 为canvas绑定mouse事件 */$('canvas').mousedown(function(e){    flag = true;    x = e.offsetX; // 鼠标落下时的X    y = e.offsetY; // 鼠标落下时的Y}).mouseup(function(e){    flag = false;    url = $('canvas')[0].toDataURL(); // 每次 mouseup 都保存一次画布状态}).mousemove(function(e){    drawXxx(e); // 绘制方法});

1、画笔工具

function drawPencil(e){    if(flag){        ctx.lineTo(e.offsetX,e.offsetY);        ctx.stroke(); // 调用绘制方法     }else{        ctx.beginPath();        ctx.moveTo(x,y);    }}

2、画矩形

function drawRect(e){    if(flag){        ctx.clearRect(0,0,canvas.width,canvas.height);        ctx.beginPath();        ctx.strokeRect(x,y,e.offsetX-x,e.offsetY-y);    }}

3、画直线

function drawLine(e){    if(flag){        ctx.clearRect(0,0,canvas.width,canvas.height);        ctx.beginPath();        ctx.moveTo(x,y);        ctx.lineTo(e.offsetX,e.offsetY);        ctx.stroke();       }}

4、画圆circle

function drawCircle(e){    if(flag){        ctx.clearRect(0,0,canvas.width,canvas.height);        ctx.beginPath();        var rx = (e.offsetX-x)/2;        var ry = (e.offsetY-y)/2;        var r = Math.sqrt(rx*rx+ry*ry);        ctx.arc(rx+x,ry+y,r,0,Math.PI*2); // 第5个参数默认是false-顺时针        ctx.stroke();    }}

但是这样，画布上只能同时有一个图形，所以需要保存画布之前的状态

function loadImage(){    var img = new Image();    img.src = url;    ctx.drawImage(img,0,0,canvas.width,canvas.height);}

将 loadImage() 在清空画布后调用

阅读全文

0 0