有没有人可以帮助我的脚本?看到jsfiddle.net/7QmSz/3。
HTML:<canvas id="canvas" height="1000" width="1000" class="bezier" style="cursor: default;"></canvas>
#canvas
{
position: absolute;
left: 100px;
top: 100px;
background-color: rgba(255, 255, 255, 0.1);
}
(function() {
var canvas;
var ctx;
var code;
var point;
var style;
var drag = null;
var dPoint;
function Init(quadratic) {
point = {
p1: { x:50, y:100 },
p2: { x:200, y:100 },
p3: { x:50 , y:100 },
p4: { x:200 , y:100 }
};
if (quadratic) {
point.cp1 = { x: 50, y: 50 };
point.cp3 = { x: 250, y: -110 };
}
else {
point.cp1 = { x: 50, y: 10 };
point.cp2 = { x: 200, y: 10 };
point.cp3 = { x: 50, y: 190 };
point.cp4 = { x: 200, y: 190 };
}
style = {
curve: { width: 2, color: "#C0C0C0" },
cpline: { width: 1, color: "#C0C0C0" },
point: { radius: 3, width: 1, color: "#C0C0C0", fill: "rgba(200,200,200,0.5)", arc1: 0, arc2: 2 * Math.PI },
}
ctx.lineCap = "round";
ctx.lineJoin = "round";
canvas.onmousedown = DragStart;
canvas.onmousemove = Dragging;
canvas.onmouseup = canvas.onmouseout = DragEnd;
DrawCanvas();
}
function DrawCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.lineWidth = style.cpline.width;
ctx.strokeStyle = style.cpline.color;
ctx.beginPath();
ctx.moveTo(point.p1.x, point.p1.y);
ctx.lineTo(point.cp1.x, point.cp1.y);
if (point.cp2) {
ctx.moveTo(point.p2.x, point.p2.y);
ctx.lineTo(point.cp2.x, point.cp2.y);
}
else {
ctx.lineTo(point.p2.x, point.p2.y);
}
ctx.stroke();
ctx.lineWidth = style.cpline.width;
ctx.strokeStyle = style.cpline.color;
ctx.beginPath();
ctx.moveTo(point.p3.x, point.p3.y);
ctx.lineTo(point.cp3.x, point.cp3.y);
if (point.cp2) {
ctx.moveTo(point.p4.x, point.p4.y);
ctx.lineTo(point.cp4.x, point.cp4.y);
}
else {
ctx.lineTo(point.p4.x, point.p4.y);
}
ctx.stroke();
ctx.lineWidth = style.curve.width;
ctx.strokeStyle = style.curve.color;
ctx.beginPath();
ctx.moveTo(point.p1.x, point.p1.y);
if (point.cp2) {
ctx.bezierCurveTo(point.cp1.x, point.cp1.y, point.cp2.x, point.cp2.y, point.p2.x, point.p2.y);
}
else {
ctx.quadraticCurveTo(point.cp1.x, point.cp1.y, point.p2.x, point.p2.y);
}
var img = new Image();
img.src = 'http://img201.imageshack.us/img201/5708/eyeq.jpg';
var pattern = ctx.createPattern(img, 'repeat')
ctx.globalAlpha = "1";
ctx.fillStyle = pattern;
ctx.fill();
ctx.stroke();
ctx.lineWidth = style.curve.width;
ctx.strokeStyle = style.curve.color;
ctx.beginPath();
ctx.moveTo(point.p3.x, point.p3.y);
if (point.cp3) {
ctx.bezierCurveTo(point.cp3.x, point.cp3.y, point.cp4.x, point.cp4.y, point.p4.x, point.p4.y);
}
else {
ctx.quadraticCurveTo(point.cp3.x, point.cp3.y, point.p4.x, point.p4.y);
}
var img = new Image();
img.src = 'http://img201.imageshack.us/img201/5708/eyeq.jpg';
var pattern = ctx.createPattern(img, 'repeat')
ctx.globalAlpha = "1";
ctx.fillStyle = pattern;
ctx.fill();
ctx.stroke();
for (var p in point) {
if(p == 'cp1' || p == 'cp2' || p == 'cp3' || p == 'cp4')
{
ctx.lineWidth = style.point.width;
ctx.strokeStyle = style.point.color;
ctx.fillStyle = style.point.fill;
ctx.beginPath();
ctx.arc(point[p].x, point[p].y, style.point.radius, style.point.arc1, style.point.arc2, true);
ctx.fill();
ctx.stroke();
}
else
{
ctx.lineWidth = style.point.width;
ctx.strokeStyle = style.point.color;
ctx.fillStyle = style.point.fill;
ctx.beginPath();
ctx.rect(point[p].x - 4, point[p].y - 4, 7, 7);
ctx.fill();
ctx.stroke();
}
}
}
function DragStart(e) {
e = MousePos(e);
var dx, dy;
for (var p in point) {
dx = point[p].x - e.x;
dy = point[p].y - e.y;
if ((dx * dx) + (dy * dy) < style.point.radius * style.point.radius) {
if(p == 'cp1' || p == 'cp2' || p == 'cp3' || p == 'cp4')
{
drag = p;
dPoint = e;
canvas.style.cursor = "move";
}
return;
}
}
}
function Dragging(e) {
if (drag) {
e = MousePos(e);
point[drag].x += e.x - dPoint.x;
point[drag].y += e.y - dPoint.y;
dPoint = e;
DrawCanvas();
}
}
function DragEnd(e) {
drag = null;
canvas.style.cursor = "default";
DrawCanvas();
}
function MousePos(event) {
event = (event ? event : window.event);
return {
x: event.pageX - canvas.offsetLeft,
y: event.pageY - canvas.offsetTop
}
}
canvas = document.getElementById("canvas");
if (canvas.getContext) {
ctx = canvas.getContext("2d");
Init(canvas.className == "quadratic");
}
})();
问题是，当您第一次加载页面或刷新浏览器时，脚本不加载背景图像。取而代之的是显示默认背景。我不知道是什么问题
您没有等待图像首先完成下载，因此画布将在您的图像尚未可用时运行其其余代码。强制它首先加载，要么通过在画布之前使用图像src的<img>元素，要么首先创建image()，给它一个onload处理程序，然后设置它的src属性，使用onload处理程序调用画布的代码。