这篇博客展示了如何使用HTML5的Canvas元素和JavaScript来绘制带有渐变效果的贝塞尔曲线。通过`createLinearGradient`创建线性渐变，并使用`quadraticCurveTo`绘制二次贝塞尔曲线。文章还提供了点击Canvas获取鼠标坐标的功能。
<!DOCTYPE html>
<html>
<head>
<title>
Cubic Bezier Curve
</title>
</head>
<body>
<canvas id="canvas" width="800" height="200"
style="border:solid 4px green; position: relative; top: 300px;" > </canvas>
<script>
// 角度 长 高（一致） 颜色
//绘制一条二次贝塞尔曲线：
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
drawBezierLineDash(ctx,canvas.width,{x:145,y:23},{x:20,y:60},{x:500,y:120});
var ctx2=canvas.getContext("2d");
drawBezierLineDash(ctx2,canvas.width,{x:50,y:150},{x:50,y:90},{x:455,y:178});
// 容器，宽度，开始，拐点，结束
function drawBezierLineDash(context,width,start,point,end){
context.beginPath();
var gradient=context.createLinearGradient(0,0,width,0);
context.setLineDash([5, 5]);
context.lineWidth=3;
context.moveTo(start.x,start.y);//开始点
context.quadraticCurveTo(point.x,point.y,end.x,end.y);// 拐弯点，结束点
gradient.addColorStop("0","red");//头部颜色
gradient.addColorStop("0.5","yellow");//中部颜色
gradient.addColorStop("1.0","red");//尾间颜色
context.strokeStyle=gradient;
context.stroke();
}
canvas.addEventListener("click", function __handler__(evt) {
var x = evt.clientX;
var y = evt.clientY;
var rect = canvas.getBoundingClientRect();
x -= rect.left;
y -= rect.top;
console.log(x, y); // (x, y) 就是鼠标在 canvas 单击时的坐标
});
</script>
</body>
</html>
效果图
261
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
