1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 |
- <!DOCTYPE html>
- <head>
- <meta charset=utf-8>
- <title>HTML5</title>
- <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
- <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
- <script src="canvas2image.js"></script>
- <style type="text/css">
- #xu {
- border: 1px solid #ccc;
- }
- </style>
- <button onclick="savePic()">save</button>
- <img src="" id='screen' alt="will show here">
- </head>
- <body>
- <canvas id="xu" width="500" height="400"></canvas>
- <script type="text/javascript">
- var canvas = document.getElementById("xu");
- var xx = canvas.getContext("2d");
- xx.lineWidth = 5;
- xx.strokeStyle = "blue";
- var flag = false;
- //当鼠标按下时
- $("#xu").mousedown(function (e) {
- alert("aa");
- var mouseX = e.pageX - this.offsetLeft;//获得当前页面的x坐标
- var mouseY = e.pageY - this.offsetTop;//y
- flag = true;
- xx.moveTo(mouseX, mouseY);//起始位置
- });
- //当鼠标抬起时
- $("#xu").mouseup(function (e) {
- flag = false;
- });
- //当鼠标移动时
- $("#xu").mousemove(function (e) {
- var mouseX = e.pageX - this.offsetLeft;//获得当前页面的x坐标
- var mouseY = e.pageY - this.offsetTop;//y
- if (flag) {
- xx.lineTo(mouseX, mouseY);//终止位置
- xx.stroke();//结束图形
- }
- })
- ;
- function savePic() {
- var image=new Image();
- image.src= document.getElementById("xu").toDataURL("image/png");
- document.getElementById('screen').src=image.src;
- }
- </script>
- </body>
- </html>
|