html Canvas 画图 能够选择并能移动
2018-06-24 01:46:30来源:未知 阅读 ()
canvas 画图,能够选中所画的图片并且能够随意移动图片
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script type="text/javascript" src="JS/jquery.min.js"></script> </head> <body> <canvas id="myCanvas" width="500" height="400" style="border:1px solid #000000; background-color: #CCCCCC;"></canvas> <input id="Button1" type="button" value="画矩形" onclick="DrawingRec()" /> <input id="Button2" type="button" value="画线" onclick="Drawline()"/> <p></p> </body> </html> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var list = []; var currentImag; var ax, ay, x, y; var startmove = false; var c = document.getElementById("myCanvas"); c.onmousedown = function (e) { for (var i = 0; i < list.length; i++) { var w = list[i].x + list[i].width; var h = list[i].y + list[i].height; if (e.clientX < w && e.clientX > list[i].x && e.clientY < h && e.clientY > list[i].y) { currentImag = list[i]; startmove = true; console.log("select: true"); } } }; c.onmousemove = function (e) { console.log("x:" + e.pageX + " y:" + e.pageY); if (currentImag == null) return; console.log("moveselect:true"); x = e.clientX; y = e.clientY; //限制移动不能超出画布 (x < 40) ? ax = 20 : ax = 480; (y < 40) ? ay = 20 : ay = 380; (x < 480 && x > 20) ? x = e.clientX : x = ax; (y < 380 && y > 20) ? y = e.clientY : y = ay; //清除之前图片然后重新绘制 ctx.clearRect(0, 0, c.width, c.height); currentImag.x = x; currentImag.y = y; Piant(); ctx.drawImage(currentImag, x - 20, y - 20, currentImag.width, currentImag.height); }; c.onmouseup = function () { //c.onmousemove = null; //c.onmouseup = null; currentImag = null; startmove = false; }; function Piant() { if (startmove) { for (var i = 0; i < list.length; i++) { ctx.drawImage(list[i], list[i].x - 20, list[i].y - 20, list[i].width, list[i].height); } } } function DrawingRec() { //ctx.beginPath(); //ctx.fillStyle = "#000000"; //ctx.fillRect(200, 100, 150, 75); //ctx.closePath(); var img = new Image(); img.src = "default/images/panel_tools.png"; img.x = 50; img.y = 50; img.width = 40; img.height = 40; ctx.drawImage(img, 50, 50, img.width, img.height); list.push(img); } </script>
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:JS数组
- 详解HTML5 使用video标签实现选择摄像头功能 2020-02-07
- Extjs Label的 fieldLabel和html属性值对齐的方法 2020-01-07
- jquery模拟LCD 时钟的html文件源代码 2019-12-08
- javascript动态判断html元素并执行不同的操作 2019-11-30
- 在HTML页面加载完毕后运行某个js的实现方法 2019-11-25
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash