canvas實現的賽貝爾曲線效果程式碼例項

admin發表於2017-02-17
原文網址 : https://www.softwhy.com/article-1189-1.html
Canvas
分享一段程式碼例項，它實現了賽貝爾曲線效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
}
#canvas {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1;
}
#cp1 {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: red;
  position: absolute;
  top: 160px;
  left: 10px;
  z-index: 2;
}
#cp2 {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: #00BFFF;
  position: absolute;
  top: 460px;
  left: 310px;
  z-index: 2;
}
</style>
</head>
<body>
<div id="cp1"></div>
<div id="cp2"></div>
<canvas id="canvas" width="300" height="600"></canvas>
<div id="text">
cubic-bezier(0,1,1,0)
</div>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cp1 = document.getElementById("cp1");
var cp2 = document.getElementById("cp2");
var textDiv = document.getElementById("text");
 
function drawBack() {
  var gradient = ctx.createLinearGradient(0, 0, 0, 600);
  gradient.addColorStop(0, "white");
  gradient.addColorStop(0.5, "#ccc");
  gradient.addColorStop(1, "white");
  ctx.beginPath();
  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, 300, 600);
 
  //白條
  ctx.fillStyle = "white";
  for (var i = 150; i < 450; i += 40) {
    ctx.beginPath();
    ctx.fillRect(0, i, 300, 20)
  }
  //x軸
  ctx.beginPath();
  ctx.strokeStyle = "black";
  ctx.lineWidth = 1;
  ctx.moveTo(0, 450);
  ctx.lineTo(300, 450);
  ctx.stroke();
 
  //y軸
  ctx.beginPath();
  ctx.moveTo(1, 450);
  ctx.lineTo(1, 150);
  ctx.stroke();
}
 
function drawLine() {
  ctx.clearRect(0, 0, 300, 600);
  drawBack();
  ctx.beginPath();
  ctx.strokeStyle = "black";
  ctx.lineWidth = 5;
  ctx.moveTo(0, 450);
  ctx.bezierCurveTo(cp1.offsetLeft - 10, cp1.offsetTop - 10, cp2.offsetLeft - 10, cp2.offsetTop - 10, 300, 150);
  ctx.stroke();
 
  //連線1
  ctx.beginPath();
  ctx.moveTo(cp1.offsetLeft - 10, cp1.offsetTop - 10);
  ctx.lineTo(0, 450);
  ctx.lineWidth = 2;
  ctx.stroke();
 
  //連線2
  ctx.beginPath();
  ctx.moveTo(cp2.offsetLeft - 10, cp2.offsetTop - 10);
  ctx.lineTo(300, 150);
  ctx.stroke();
 
  drawText();
}
 
//寫字
function drawText() {
  var p1X = ((cp1.offsetLeft - 10) / 300).toFixed(2);
  var p1Y = ((450 - (cp1.offsetTop - 10)) / 300).toFixed(2);
  var p2X = ((cp2.offsetLeft - 10) / 300).toFixed(2);
  var p2Y = ((450 - (cp2.offsetTop - 10)) / 300).toFixed(2);
  textDiv.innerHTML = "cubic-bezier(" + p1X + "," + p1Y + "," + p2X + "," + p2Y + ")";
 
}
 
cp1.onmousedown = function() {
  document.onmousemove = function(e) {
    var ev = e || window.event;
    var x = ev.clientX;
    var y = ev.clientY;
    if (x < 20) {
      x = 20;
    }
    if (x > 320) {
      x = 320
    }
    cp1.style.left = (x - 10) + "px";
    cp1.style.top = (y - 10) + "px";
 
    drawLine();
 
  }
  document.onmouseup = function() {
    document.onmousemove = null;
  }
 
}
 
cp2.onmousedown = function() {
  document.onmousemove = function(e) {
    var ev = e || window.event;
    var x = ev.clientX;
    var y = ev.clientY;
    if (x < 20) {
      x = 20;
    }
    if (x > 320) {
      x = 320;
    }
    cp2.style.left = (x - 10) + "px";
    cp2.style.top = (y - 10) + "px";
 
    drawLine();
 
  }
  document.onmouseup = function() {
    document.onmousemove = null;
  }
 
}
drawLine()
</script>
</body>
</html>

相關文章