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>
相關文章
- canvas載入效果程式碼例項Canvas
- Android 窗簾(Curtain)效果四之賽貝爾曲線優化AndroidAI優化
- canvas 二次貝塞爾曲線quadraticCurveTo()Canvas
- canvas bezierCurveTo() 三次貝塞爾曲線Canvas
- canvas原型鐘錶效果程式碼例項Canvas原型
- canvas氣泡上浮效果程式碼例項Canvas
- canvas繪製箭頭效果程式碼例項Canvas
- 貝塞爾曲線
- 貝塞爾曲線(Bezier curve)實現節點連線
- canvas基礎[二]教你編寫貝塞爾曲線工具Canvas
- 貝塞爾曲線原理、推導及Matlab實現Matlab
- html實現簡單ListViews效果的例項程式碼HTMLView
- canvas繪製拋物線程式碼例項Canvas線程
- Android-貝塞爾曲線實現水波紋動畫Android動畫
- CSS transition animation的使用(內含貝賽爾曲線詳解)CSS
- 貝塞爾曲線基礎部分
- canvas刮刮樂程式碼例項Canvas
- canvas繪製扇形程式碼例項Canvas
- html5 canvas 實現光線沿不規則路徑運動例項程式碼HTMLCanvas
- 使用二階貝塞爾曲線實現新增購物車動畫動畫
- 貝塞爾曲線理解與應用
- canvas繪製網格程式碼例項Canvas
- jQuery tab選項卡效果程式碼例項jQuery
- CSS橢圓效果程式碼例項CSS
- 如何理解並應用貝塞爾曲線
- 貝塞爾曲線的css實現——淘寶加入購物車基礎動畫CSS動畫
- Flutter BottomAppBar 自定義路徑 + 貝塞爾曲線實現閒魚底部導航FlutterAPP
- canvas繪製機器貓程式碼例項Canvas
- canvas translate()、scale()和rotate()方法程式碼例項Canvas
- Canvas實現放大鏡效果完整案例分析(附程式碼)Canvas
- 美化滾動條效果程式碼例項
- css3水滴效果程式碼例項CSSS3
- css背景虛化效果程式碼例項CSS
- 【Flutter高階玩法】 貝塞爾曲線的表象認知Flutter
- Android日常學習:OpenGL 實踐之貝塞爾曲線繪製Android
- canvas繪製圓形鐘錶程式碼例項Canvas
- canvas實現波浪效果Canvas
- jQuery點選滑出層效果程式碼例項jQuery
- css3晃動效果程式碼例項CSSS3