二次贝塞尔曲线
image.png
可以快速生成二次、三次贝塞尔曲线的源码生成器，方便经常使用到canvas画图的同学使用，可以直接预览效果随意画出自己想要的图像。
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d")
ctx.lineWidth = 6;
ctx.strokeStyle = "#0090D2";
ctx.beginPath();
ctx.moveTo(118, 264);
ctx.quadraticCurveTo(250, 100, 378, 264);
ctx.stroke();
三次贝塞尔曲线
image.png
/*绘制三次贝塞尔曲线 */
ctx.beginPath();
ctx.moveTo(50, 350);
ctx.bezierCurveTo(120, 160, 300, 60, 340, 300);
ctx.strokeStyle = "#f40";
ctx.stroke();
下面我们来模拟画着这样一张图
QQ20171227-222714-HD.gif
首先我们要画出两条连接小球的线，再画两个小球和贝塞尔曲线；
贝塞尔曲线的位置随小球的位置移动
html
<canvas id="mycanvas" width="500" height="500">
您的浏览器不支持canvas
</canvas>
css
canvas{
border:2px solid #000000;
}
js里我们要判断鼠标当前点击的是哪一个小球，有两种判断方式
js
方式一：通过判断鼠标的位置与小球的圆心位置是否超过小球的半径
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
//x1,y1 红球坐标
var x1 =100;
var y1 =100;
//篮球坐标 x2,y2
var x2 =400;
var y2 =400;
//连接线
draw(x1,y1,x2,y2)
function draw(x1,y1,x2,y2){
context.beginPath();
context.moveTo(0,500);
context.lineTo(x1,y1);
context.strokeStyle = "#000000";
context.lineWidth = "1";
context.stroke();
context.beginPath();
context.moveTo(500,0);
context.lineTo(x2,y2);
context.strokeStyle = "#000000";
context.lineWidth = "1";
context.stroke();
//红球
context.beginPath();
context.arc(x1,y1,10,0,Math.PI*2);
context.fillStyle ="red";
context.fill();
//蓝球
context.beginPath();
context.arc(x2,y2,10,0,Math.PI*2);
context.fillStyle ="cadetblue";
context.fill();
//
context.beginPath();
context.moveTo(500,0);
context.lineTo(0,500);
context.strokeStyle = "rgba(0,0,0,0.1)";
context.lineWidth = "10";
context.stroke();
//画贝塞尔曲线
context.beginPath();
context.moveTo(0,500);
context.bezierCurveTo(x1,y1,x2,y2,500,0);
context.lineWidth=4;
context.strokeStyle = "#000000";
context.stroke();
}
//拖动小球做动画
//判断是否拖动小球
//如果在小球上做动画
canvas.onmousedown = function(ev){
var ev = window.event||ev;
var x = ev.clientX-canvas.offsetLeft;
var y = ev.clientY- canvas.offsetTop;
//判断是否在红球上；
var disRed = Math.pow((x-x1),2)+Math.pow((y-y1),2);
if(disRed<100){
console.log("在红球上")
canvas.onmousemove = function(ev){
var ev = window.event||ev;
var xx = ev.clientX-canvas.offsetLeft;
var yy = ev.clientY- canvas.offsetTop;
//清除画布
context.clearRect(0,0,canvas.width,canvas.height);
x1 = xx;
y1 = yy;
//重绘制
draw(x1,y1,x2,y2)
}
}
var disBlue = Math.pow((x-x2),2)+Math.pow((y-y2),2);
//判断是否在蓝球上
if(disBlue<100){
console.log("在蓝球上")
canvas.onmousemove = function(ev){
var ev = window.event||ev;
var xx = ev.clientX-canvas.offsetLeft;
var yy = ev.clientY- canvas.offsetTop;
//清除画布
context.clearRect(0,0,canvas.width,canvas.height);
x2 = xx;
y2 = yy;
//重绘制
draw(x1,y1,x2,y2)
}
}
}
document.onmouseup = function(){
canvas.onmousemove = null;
}
方式二：通过isPointInPath判断鼠标的位置是否在小球上
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
//x1,y1 红球坐标
var x1 =100;
var y1 =100;
//篮球坐标 x2,y2
var x2 =400;
var y2 =400;
//连接线
draw(x1,y1,x2,y2)
function draw(x1,y1,x2,y2){
context.beginPath();
context.moveTo(0,500);
context.lineTo(x1,y1);
context.strokeStyle = "#000000";
context.lineWidth = "1";
context.stroke();
context.beginPath();
context.moveTo(500,0);
context.lineTo(x2,y2);
context.strokeStyle = "#000000";
context.lineWidth = "1";
context.stroke();
//bantoumingxian
context.beginPath();
context.moveTo(500,0);
context.lineTo(0,500);
context.strokeStyle = "rgba(0,0,0,0.1)";
context.lineWidth = "10";
context.stroke();
//画贝塞尔曲线
context.beginPath();
context.moveTo(0,500);
context.bezierCurveTo(x1,y1,x2,y2,500,0);
context.lineWidth=4;
context.strokeStyle = "#000000";
context.stroke();
}
red(x1,y1);
function red(x1,y1){
//红球
context.beginPath();
context.arc(x1,y1,10,0,Math.PI*2);
context.fillStyle ="red";
context.fill();
}
blue(x2,y2);
//蓝球
function blue(x2,y2){
context.beginPath();
context.arc(x2,y2,10,0,Math.PI*2);
context.fillStyle ="cadetblue";
context.fill();
}
//拖动小球做动画
//判断是否拖动小球
//如果在小球上做动画
canvas.onmousedown = function(ev){
console.log("按下了")
var ev = window.event||ev;
var x = ev.clientX-canvas.offsetLeft;
var y = ev.clientY- canvas.offsetTop;
console.log(x,y);
context.clearRect(0,0,canvas.width,canvas.height);
//红球
draw(x1,y1,x2,y2);
red(x1,y1)
if(context.isPointInPath(x,y)){
console.log("在红球里");
canvas.onmousemove = function(ev){
var ev = window.event||ev;
var xx = ev.clientX-canvas.offsetLeft;
var yy = ev.clientY- canvas.offsetTop;
//清除画布
context.clearRect(0,0,canvas.width,canvas.height);
x1 = xx;
y1 = yy;
//重绘制
draw(x1,y1,x2,y2);
red(x1,y1);
blue(x2,y2);
}
}
//蓝球
blue(x2,y2)
if(context.isPointInPath(x,y)){
console.log("在蓝色里");
canvas.onmousemove = function(ev){
var ev = window.event||ev;
var xx = ev.clientX-canvas.offsetLeft;
var yy = ev.clientY- canvas.offsetTop;
//清除画布
context.clearRect(0,0,canvas.width,canvas.height);
x2 = xx;
y2 = yy;
//重绘制
draw(x1,y1,x2,y2);
red(x1,y1);
blue(x2,y2);
}
}
}
document.onmouseup = function(){
canvas.onmousemove = null;
}
网友评论