html5 canvas鼠标画笔特效

上一篇文章：

html5 canvas rotate属性实现图片旋转

下一篇文章：

css3圆角switch开关按钮动画样式

gooood个人博客网站

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 id="images"></div>
<canvas style="border:1px solid #000000;margin:0;padding:0;
position:relative;left:50px;top:50px;width:300px;height:300px" 
id="imgCanvas" width="150" height="150"></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>

当前文章内容为原创转载请注明出处：http://www.good1230.com/detail/2018-08-27/212.html

最后生成于 2024-06-22 12:02:54

上一篇文章：

html5 canvas rotate属性实现图片旋转

下一篇文章：


上一月		一			下一月
日	一	二	三	四	五	六

html5 canvas鼠标画笔特效

html5 canvas rotate属性实现图片旋转

css3圆角switch开关按钮动画样式

html5 canvas rotate属性实现图片旋转

css3圆角switch开关按钮动画样式

热门推荐：