canvas 划线之后填充

标签：user   line   onclick   ber   var   app   页面滑动   enabled   net   

        <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>

canvas 划线之后填充

标签：user   line   onclick   ber   var   app   页面滑动   enabled   net   

原文地址：https://www.cnblogs.com/mrt-yyy/p/11509312.html