canvas 按住滑鼠拖動 繪製文字
本章節分享一段程式碼例項,它實現了按住滑鼠拖動能夠繪製文字的功能。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> html, body { width: 100%; height: 100%; margin: 0px; overflow: hidden; } canvas { cursor: crosshair; } span { font-family: 'Georgia', cursive; font-size: 40px; position: fixed; top: 50%; left: 50%; color: #a79e17; margin-top: -40px; margin-left: -200px; } </style> <script> window.onload=function(){ // Application variables var position = { x: 0, y: window.innerHeight / 2 }; var counter = 0; var minFontSize = 3; var angleDistortion = 0; var letters = "螞蟻部落,div教程,css教程,正規表示式。青島市南區,ajax教程,json教程,特效程式碼下載。"; // Drawing variables var canvas; var context; var mouse = { x: 0, y: 0, down: false } function init() { canvas = document.getElementById('canvas'); context = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; canvas.addEventListener('mousemove', mouseMove, false); canvas.addEventListener('mousedown', mouseDown, false); canvas.addEventListener('mouseup', mouseUp, false); canvas.addEventListener('mouseout', mouseUp, false); canvas.addEventListener('dblclick', doubleClick, false); window.onresize = function (ev) { var oEvent = event || ev; canvas.width = window.innerWidth; canvas.height = window.innerHeight; } } function mouseMove(ev) { var oEvent = event || ev; mouse.x = oEvent.pageX; mouse.y = oEvent.pageY; draw(); } function draw() { if (mouse.down) { var d = distance(position, mouse); var fontSize = minFontSize + d / 2; var letter = letters[counter]; var stepSize = textWidth(letter, fontSize); if (d > stepSize) { var angle = Math.atan2(mouse.y - position.y, mouse.x - position.x); context.font = fontSize + "px Georgia"; context.save(); context.translate(position.x, position.y); context.rotate(angle); context.fillText(letter, 0, 0); context.restore(); counter++; if (counter > letters.length - 1) { counter = 0; } position.x = position.x + Math.cos(angle) * stepSize; position.y = position.y + Math.sin(angle) * stepSize; } } } function distance(pt, pt2) { var xs = 0; var ys = 0; xs = pt2.x - pt.x; xs = xs * xs; ys = pt2.y - pt.y; ys = ys * ys; return Math.sqrt(xs + ys); } function mouseDown(ev) { var oEvent = ev || event mouse.down = true; position.x = oEvent.pageX; position.y = oEvent.pageY; document.getElementById('info').style.display = 'none'; } function mouseUp(ev) { mouse.down = false; } function doubleClick(ev) { canvas.width = canvas.width; } function textWidth(string, size) { context.font = size + "px Georgia"; if (context.fillText) { return context.measureText(string).width; } else if (context.mozDrawText) { return context.mozMeasureText(string); } }; init(); } </script> </head> <body> <canvas id='canvas'></canvas> <span id='info'>螞蟻部落歡迎您</span> </body> </html>
相關文章
- canvas實現的按住滑鼠拖動能夠繪製文字效果Canvas
- JavaScript拖動滑鼠繪製矩形方框JavaScript
- canvas 繪製文字Canvas
- js按住滑鼠繪製線條程式碼例項JS
- canvas 繪製文字詳解Canvas
- 滑鼠按住拖動具有半透明效果的程式碼例項
- 按住滑鼠可以拖動箭頭旋轉程式碼例項
- 按住panel 拖動窗體的方法
- html5 canvas學習--繪製文字HTMLCanvas
- canvas核心技術-如何繪製圖片和文字Canvas
- canvas實現手動繪製矩形Canvas
- SVG拖動繪製矩形程式碼例項SVG
- canvas 繪製矩形Canvas
- canvas 繪製扇形Canvas
- canvas繪製滑鼠懸浮可以變大的立體小球Canvas
- 小程式利用Canvas繪製圖片和豎排文字Canvas
- canvas繪製太陽系運動效果Canvas
- canvas 繪製線條Canvas
- canvas 繪製圓形Canvas
- canvas繪製流星效果Canvas
- canvas繪製直線Canvas
- 基於canvas繪製的一個跟隨滑鼠變幻的動態背景線條Canvas
- Web Office 套件(8):狀態管理 & 拖動滑鼠選中文字Web套件
- canvas繪製圓盤走動鐘錶效果Canvas
- Canvas的drawText繪製文字自動換行(支援設定顯示最大行數)Canvas
- Canvas 繪製雷達圖Canvas
- canvas繪製動畫的技巧Canvas動畫
- canvas 繪製立體圓環Canvas
- canvas 繪製圓角矩形Canvas
- canvas 繪製矩形缺角Canvas
- canvas 繪製雙線技巧Canvas
- canvas繪製風車效果Canvas
- canvas繪製笑臉表情Canvas
- canvas繪製太陽系Canvas
- canvas繪製矩形框Canvas
- Canvas 繪製風向動畫Canvas動畫
- SVG <text>繪製文字SVG
- canvas 繪製圖案是重疊繪製而不是重置Canvas