html5 canvas鼠标画笔特效
gooood个人博客网站
canvas
html5 canvas鼠标画笔特效
<!DOCTYPE html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Mouse coord (user help)</title> <!-- TODO: Missing CoffeeScript 2 --> <script type="text/javascript"> window.onload=function(){ var canvas = document.getElementById("imgCanvas"); var context = canvas.getContext("2d"); function createImageOnCanvas(imageId) { //canvas.style.display = "block"; //document.getElementById("images").style.overflowY = "hidden"; //var img = new Image(300, 300); //img.src = document.getElementById(imageId).src; //context.drawImage(img, (0), (0)); //onload.... } function draw(e) { var pos = getMousePos(canvas, e); posx = pos.x; posy = pos.y; context.fillStyle = "#000000"; context.fillRect(posx, posy, 4, 4); } window.addEventListener('mousemove', draw, false); function getMousePos(canvas, evt) { var rect = canvas.getBoundingClientRect(); return { x: (evt.clientX - rect.left) / (rect.right - rect.left) * canvas.width, y: (evt.clientY - rect.top) / (rect.bottom - rect.top) * canvas.height }; } } </script> </head> <body> <div></div> <canvas></canvas> <script> // tell the embed parent frame the height of the content if (window.parent && window.parent.parent){ window.parent.parent.postMessage(["resultsFrame", { height: document.body.getBoundingClientRect().height, slug: "4xezb7nL" }], "*") } </script> </body> </html>