首页 > 移动平台 > 详细

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

时间:2016-08-08 22:39:10      阅读:313      评论: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
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!