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

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

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();
        };
    };
时间: 2024-10-07 06:10:21

canvas 绘制跟谁鼠标移动的线条的相关文章

Canvas绘制线条模糊的解决方案

前段时间,做一个跨平台app项目,需要绘制分时图和K线图.找了很多开源的js的图表库,包括echarts.highcharts等等,都不是很满意,原因有2: 1.太臃肿,我实际上只要一个分时和一个K线图表,最多搭配几个线形图 2.不满足需求.主要就是分时图,国内玩的js图表库,几乎都没有分时图.都是用1分钟线的收盘价线来做的,和中国股民的使用习惯完全不搭界. 多年前有人开源了一个js绘制股票图形的库,叫做html54stock,图像表现上很符合中国人的使用习惯,但是也有问题: 1.封装不好,很多

使用html5 Canvas绘制线条(直线、折线等)

使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeStyle 用于设置画笔绘制路径的颜色.渐变和模式.该属性的值可以是一个表示css颜色值的字符串.如果你的绘制需求比较复杂,该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象 globalAlpha 定义绘制内容的透明度,取值在0.0(完全透明)和1.0(完全不透明)之间,默认

html5 Canvas绘制图形入门详解

html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome.Opera.Safari.IE9+)都已经开始支持html5了.除此之外,在移动浏览器市场上,众多的移动浏览器也纷纷展开关于「html5的支持能力以及性能表现」的军备竞赛.html作为革命性的网页技术标准,再加上众多浏览器厂商或组织的鼎力支持,可以想见,html5将会成为未来网页技术的领头羊. ht

使用Canvas绘制图形的基本教程

原文地址:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以也要好好学习一把. 好好看了一下Canvas的功能,感觉HTML5在客户端交互的功能性越来越强了,今天看了一下Canvas绘图,下边是几个实例,记下以备后用. 1.使用Canvas绘制直线: <!doctype html> <html> <head> <meta ch

canvas绘制直线多边形(二)

在绘制之前,依据上一节所说的内容获取context  2维画布 1 context.moveTo(x,y); 定义绘图开始 2 context.lintTo(x1,y1); 定义线条画到的位置 3 context.lineWidth=5; //线条宽度 4 context.strokeStyle="red" //线条颜色 5 context.stroke(); //用于绘制线条 利用上述代码我们可以绘制一条,从(x,y)坐标开始,到(x1,y1)结束的宽5个像素,颜色为红色的直线  

HTML5之Canvas绘图——使用Canvas绘制图形的基本教程

原文转自:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以也要好好学习一把. 好好看了一下Canvas的功能,感觉HTML5在客户端交互的功能性越来越强了,今天看了一下Canvas绘图,下边是几个实例,记下以备后用. 1.使用Canvas绘制直线: 1 <!doctype html> 2 <html> 3 <head> 4 <

HTML5 Canvas绘制实时时钟

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>try to draw the colock</title> <script src="js/modernizr-1.7.js"></script> <script type="text/javascript"> wind

WPF使用Canvas绘制可变矩形

1.问题以及解决办法 最近因为项目需要,需要实现一个位置校对的功能,大致的需求如下:有一个图片,有一些位置信息,但是位置信息可能和实际有些偏差,需要做简单调整,后面会对这张图片进行切割等,做些处理.(位置信息连接起来是一个个小矩形.) 解决以上问题的大致思路如下:使用canvas进行绘制,把图片作为canvas的背景,在canvas上绘制矩形,类似于qq截图一样,矩形框可以使用鼠标拖动调整大小.然后在记下修改后的位置,提供给后面切割图片使用.目前的关键问题就是实现类似qq截图那样可以拖动的矩形.

h5+canvas绘制动画时钟

h5+canvas绘制动画时钟 效果图,这个是截图,可以动的, 代码如下: <!DOCTYPE html><html><head><title>动画效果</title></head> <body> <canvas id="anm" width="600" height="600" style="border:1px solid gray"