鸡啄米

首页|IT互联网|数码生活|软件开发|娱乐休闲|职场人生|编程课堂|Android开发网

HTML5 Canvas绘图并保存文件的实例

       本文主要以实例的形式给大家演示如何用HTML5的Canvas绘图，并将图片保存成文件。

       前端代码：

JavaScript代码
  1. function drawArrow(angle)  
  2. {  
  3.     //Init canvas  
  4.     var canvas = $('#cv_Arrow')[0];  
  5.     var context = canvas.getContext('2d');  
  6.     var width = canvas.width;  
  7.     var height = canvas.height;  
  8.     context.clearRect(0, 0, width, height);  
  9.   
  10.     //Rotate  
  11.     var distance = iconSize / 2 * Math.sqrt(2) * Math.sin(angle * Math.PI / 180 / 2) * 2;  
  12.     var degree = 180 - 45 - (180 - angle) / 2;  
  13.     var x = distance * Math.sin(degree * Math.PI / 180);  
  14.     var y = distance * Math.cos(degree * Math.PI / 180);  
  15.     context.translate(x, -y);  
  16.     var angleInRadians = angle * Math.PI / 180;  
  17.     context.rotate(angleInRadians);  
  18.   
  19.     //Draw arrow  
  20.     context.fillStyle = 'rgb(0,0,0)'; //Black  
  21.     context.lineWidth = 1;  
  22.     context.strokeStyle = "#000000"; //Black  
  23.     context.lineCap = 'round'; //Circle angle  
  24.     context.lineJoin = 'round';  
  25.     context.beginPath();  
  26.     context.moveTo(iconSize / 2, border);  
  27.     context.lineTo(border, iconSize - border);  
  28.     context.lineTo(iconSize / 2, iconSize / 2);  
  29.     context.fill();  
  30.     context.stroke();  
  31.     context.closePath();  
  32.     context.save();  
  33.   
  34.     context.restore();  
  35.     context.fillStyle = 'rgb(255,255,255)'; //White  
  36.     context.lineWidth = 1;  
  37.     context.strokeStyle = "#000000";  
  38.     context.lineCap = 'round';  
  39.     context.lineJoin = 'round';  
  40.     context.beginPath();  
  41.     context.moveTo(iconSize / 2, border);  
  42.     context.lineTo(iconSize - border, iconSize - border);  
  43.     context.lineTo(iconSize / 2, iconSize / 2);  
  44.     context.fill();  
  45.     context.stroke();  
  46.     context.closePath();  
  47.     context.save();  
  48.   
  49.     _canvas = canvas;  
  50. }  

       发送到后台的代码：

JavaScript代码
  1. for (var i = 0; i < 360; i++)  
  2. {  
  3.     drawArrow(1);  
  4.   
  5.     var data = _canvas.toDataURL();  
  6.   
  7.     //删除字符串前的提示信息 "data:image/png;base64,"  
  8.     var b64 = data.substring(22);  
  9.   
  10.     $.ajax({ url: "RotateCanvas.aspx", data: { data: b64, name: i.toString() }, success:  
  11.             function ()  
  12.             {  
  13.             //alert('OK');  
  14.             }  
  15.     });  
  16. }  

       后台接收的代码：

C#代码
  1. if (Request["name"] != null)  
  2. {  
  3.     string name = Request["name"];  
  4.     String savePath = Server.MapPath("~/images/output/");  
  5.   
  6.     try  
  7.     {  
  8.         FileStream fs = File.Create(savePath + "/" + name + ".png");  
  9.         byte[] bytes = Convert.FromBase64String(Request["data"]);  
  10.   
  11.         fs.Write(bytes, 0, bytes.Length);  
  12.         fs.Close();  
  13.     }  
  14.     catch (Exception ex)  
  15.     {  
  16.     }  
  17. }  

       最后生成的效果：

HTML5 Canvas绘图并保存文件的实例

       生成图片的效果很棒，不失真，而且是透明的，不需要后期处理。

Tags:HTML,Javascript,编程入门 | 2015/1/30 | 发表评论

相关文章: