canvas 划线之后填充

Posted 2022-10-16 mrt-yyy

        <canvas id="xxx" ></canvas>

 

<script>

 

var yyy = document.getElementById(‘xxx‘);
var imgsrcmrt = ‘‘;
var context = yyy.getContext(‘2d‘);
var lineWidth = 5
var xyarr = [];
var Continue = true;
autoSetCanvasSize(yyy)

listenToUser(yyy)

var eraserEnabled = false;
//清除事件
/* document.getElementById("clear").onclick = function ()
context.clearRect(0, 0, yyy.width, yyy.height);
xyarr = [];
Continue = true;
*/
//下载事件
/* document.getElementById("download").onclick = function ()
var url = yyy.toDataURL("image/png")
var a = document.createElement(‘a‘)
document.body.appendChild(a)
a.href = url
a.download = ‘我的画儿.png‘
a.target = ‘_blank‘
a.click()
*/

/******/

function autoSetCanvasSize(canvas)
setCanvasSize()

window.onresize = function()
setCanvasSize()

function setCanvasSize()
var pageWidth = document.documentElement.clientWidth
var pageHeight = document.documentElement.clientHeight

canvas.width = pageWidth
canvas.height = pageHeight

function drawCircle(x, y, radius)
context.beginPath()
context.arc(x, y, radius, 0, Math.PI * 2);
context.fill()

function drawLine(x1, y1, x2, y2)
context.beginPath();
context.moveTo(x1, y1) // 起点
context.lineWidth = lineWidth
context.lineTo(x2, y2) // 终点
context.stroke()
context.closePath()

function listenToUser(canvas)

var using = false
var lastPoint =
x: undefined,
y: undefined

// 特性检测
if (document.body.ontouchstart !== undefined)
// 触屏设备 苏菲就是个触屏设备啊哥
canvas.ontouchstart = function(aaa)
var x = aaa.touches[0].clientX
var y = aaa.touches[0].clientY
// console.log(x, y)
using = true
if (Continue)
xyarr = [];
else
alert(‘只可画一笔‘)

if (eraserEnabled)
context.clearRect(x - 5, y - 5, 10, 10)
else
lastPoint =
"x": x,
"y": y



canvas.ontouchmove = function(aaa)
// console.log(‘边摸边动‘)
aaa.preventDefault(); //禁止页面滑动
var x = aaa.touches[0].clientX
var y = aaa.touches[0].clientY

if (!using)
return

xyarr.push(x);
xyarr.push(y);
if (eraserEnabled)
context.clearRect(x - 5, y - 5, 10, 10)
else
var newPoint =
"x": x,
"y": y

drawLine(lastPoint.x, lastPoint.y, newPoint.x, newPoint.y)
lastPoint = newPoint


canvas.ontouchend = function()
// console.log(‘摸完了‘)
using = false
toDrawing();

else
// 非触屏设备
canvas.onmousedown = function(aaa)
var x = aaa.clientX
var y = aaa.clientY
using = true
if (Continue)
xyarr = [];
else
alert(‘只可画一笔，重画请点清除‘)

if (eraserEnabled)
context.clearRect(x - 5, y - 5, 10, 10)
else
lastPoint =
"x": x,
"y": y



canvas.onmousemove = function(aaa)
var x = aaa.clientX
var y = aaa.clientY

if (!using)
return

xyarr.push(x);
xyarr.push(y);
if (eraserEnabled)
context.clearRect(x - 5, y - 5, 10, 10)
else
var newPoint =
"x": x,
"y": y

drawLine(lastPoint.x, lastPoint.y, newPoint.x, newPoint.y)
lastPoint = newPoint

canvas.onmouseup = function(aaa)
using = false;
toDrawing();

function sortNumber(a, b)
return a - b

//填色
var xArr = [],yArr = [];

function toDrawing()
context.clearRect(0, 0, yyy.width, yyy.height); //清空画板
var i1, i2;
imgsrcmrt = ‘‘;
xArr = [];
for (var i = 0; i < xyarr.length; i++)
if (i % 2 == 0)
xArr.push(xyarr[i])

if (i % 2 == 1)
yArr.push(xyarr[i])

 

for (var i = 0; i < xyarr.length; i++)
if (i % 2 == 0)
i1 = xyarr[i];

if (i % 2 == 1)
i2 = xyarr[i];
if (i == 1)
context.moveTo(i1, i2);
else
context.lineTo(i1, i2);

context.fillStyle = "#fee254";
context.fill();

context.closePath(); //闭合
xyarr = [];
Continue = false
$(‘img.flash‘).css(‘z-index‘, ‘-1‘);

imgsrcmrt = (yyy.toDataURL("image/png"));
buildMrt();

 

function buildMrt()
context.clearRect(0, 0, yyy.width, yyy.height); //清空画板

var image1 = new Image();
var image2 = new Image();
image1.src = imgsrcmrt;

xArr.sort(sortNumber)
yArr.sort(sortNumber)

image1.onload = function()

context.save();

context.beginPath();
var radius1 = (xArr[xArr.length - 1] - xArr[0]) / 2,
radius2 = (yArr[yArr.length - 1] - yArr[0]) / 2;
var radius = radius1 > radius2 ? radius2 : radius1;
context.arc(yyy.width * .5, yyy.height * .61, radius, 0, 2 * Math.PI);
context.closePath();
context.clip();
context.drawImage(image1, 0, 0, yyy.width, yyy.height);



var imgsrc = (yyy.toDataURL("image/png"));

image2.src = imgsrc;


image2.onload = function()
context.restore()
console.log(1111)
context.clearRect(0, 0, yyy.width, yyy.height); //清空画板
context.drawImage(image2, 0, 0, yyy.width, yyy.height);

// context.beginPath();
// context.arc(yyy.width * .5, yyy.height * .61, (xArr[xArr.length - 1] - xArr[0]) / 2, 0, 2 * Math.PI);
// context.closePath();
// context.clip();
// context.drawImage(image1, 0, 0, yyy.width, yyy.height);

 

 

 

 

</script>