码迷,mamicode.com
首页 > 移动开发 > 详细

canvas 绘制跟谁鼠标移动的线条

时间:2016-08-08 22:40:47      阅读:267      评论:0      收藏:0      [点我收藏+]

标签:

坦克大作战游戏中常见,点击某点,坦克的枪口会自动对准被点击的点!

window.onload = function() { var canvas = document.getElementById("canvas"); var obj = canvas.getContext(‘2d‘); obj.moveTo( 300, 500); obj.lineTo( 300, 480); obj.lineWidth = 6; obj.strokeStyle = "#ff0000"; obj.stroke(); canvas.onmousedown = function( e ){ var mx = e.layerX; var my = e.layerY; var sx = 300; var sy = 500; var angle = Math.atan2( ( my - sy), ( mx - sx ) ) obj.clearRect(0, 0, 600, 600); obj.beginPath(); obj.moveTo( sx, sy ); obj.lineTo( sx + 20 * Math.cos( angle ), sy + 20 * Math.sin(angle)); obj.stroke(); }; };

 

canvas 绘制跟谁鼠标移动的线条

标签:

原文地址:http://www.cnblogs.com/yuguilin/p/5751045.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!