每次做抽奖活动的时候，会有一张圆形的奖励图片。这个图片有时候运营偶尔修改一下还可以接受，但是万一很频繁的更换里面的内容的话，那每次都做一次修改那就很浪费时间，然后就想到了用canvas来自动生成这张图片。这样就节省了很多时间。
然后就需要用到一张固定尺寸的圆形转盘的背景，各种素材若干张，然后就可以自己手动上传图片生成这张图片了。
这个主要就是用到了canvas的rotate，translate，drawImage的方法就可以完成了，注意这个仅提供一个demo，可以自己再优化的哦，至于怎么优化，用过才知道！
HTML如下：
1 <div class="page"> 2 <div class="title"> 3 <h1>自动生成圆形转盘图片1.0</h1> 4 </div><!--end .title--> 5 <div class="param"> 6 <div class="param-background"> 7 <h3>背景图片</h3> 8 <div class="bg"> 9 <span class="bg-item">背景图片：</span> 10 <span class="item-content"> 11 <span class="fileWrapper"> 12 <span class="input-file"> 13 选择文件<input type="file" hidefocus="true" value="" class="select-file"> 14 </span> 15 </span> 16 <i class="filename"></i> 17 </span> 18 <div class="img-hold" id="bg"></div> 19 </div> 20 </div><!--end .param-background--> 21 <div class="param-base"> 22 <h3>基本参数</h3> 23 <ul> 24 <li style="display: none;"><label>背景宽度：<input type="text" id="bgWidth" readonly= 'readonly'></label></li> 25 <li style="display: none;"><label>背景高度：<input type="text" id="bgHeight" readonly= 'readonly'></label></li> 26 <li style="display: none;"><label>奖品宽度：<input type="text" id="giftWidth" readonly= 'readonly'></label></li> 27 <li style="display: none;"><label>奖品高度：<input type="text" id="giftHeight" readonly= 'readonly'></label></li> 28 <li><label>图片拉伸：<input type="text" id="scaleWidth" value="1">宽度,系数少于1</label></li> 29 <li><label>图片拉伸：<input type="text" id="scaleHeight" value="1">高度,系数少于1</label></li> 30 <li><label>位移参数：<input type="text" id="displaceNum" value="50"></label>距离中心点的距离</li> 31 <li style="display: none;"><label>奖品个数：<input type="text" id="giftNum" readonly= 'readonly'></label></li> 32 </ul> 33 </div><!--end .param-base--> 34 <div class="param-img"> 35 <h3>奖励图片</h3> 36 <ul id="gift-list"> 37 <li> 38 <span class="item-title">图片1：</span> 39 <span class="item-content"> 40 <span class="fileWrapper"> 41 <span class="input-file"> 42 选择文件<input type="file" hidefocus="true" value="" class="select-file"> 43 </span> 44 </span> 45 <i class="filename"></i> 46 </span> 47 <div class="img-hold"></div> 48 <div class="oprate"> 49 <a href="javascript:;" class="add-btn">增加</a> 50 <a href="javascript:;" class="delete-btn">删除</a> 51 </div> 52 </li> 53 </ul> 54 </div><!--end .param-img--> 55 </div><!--end .param--> 56 <div class="btn"> 57 <a href="javascript:void(0);">生成图片</a> 58 </div> 59 <div class="canvas-box"> 60 <h3>画布区域</h3> 61 <canvas id="canvas"></canvas> 62 <canvas id="temp"></canvas> 63 </div><!--end .canvas-box--> 64 <div class="result-box"> 65 <h3>图片区域</h3> 66 <div class="result"></div> 67 <div class="result-btn"> 68 <a href="#@" target="_blank">点击查看</a> 69 </div> 70 </div><!--end .result-box--> 71 </div><!--end .page-->
核心js代码：
1 var A = { 2 init: function() { 3 A.chooseFile(); 4 $(document).delegate('.add-btn', 'click', A.addItem); 5 $(document).delegate('.delete-btn', 'click', A.removeItem); 6 $('.btn a').click(function() { 7 A.convertImageToCanvas(); //先生成canvas 8 var obj = document.getElementById('canvas'); 9 var image = A.convertCanvasToImage(obj); //后生成图片 10 $('.result').html('').append(image); //插入图片 11 $('.result-btn a').attr('href', image.src); 12 }); 13 }, 14 chooseFile: function() { 15 if (typeof FileReader === 'underfined') { 16 alert('抱歉，你的浏览器不支持 FileReader'); 17 return false; 18 } else { 19 $(document).delegate('.select-file', 'change', A.readFile); 20 } 21 }, 22 getIndex: function(obj, arr) { 23 var i = 0; 24 for (i = 0; i < arr.length; i++) { 25 if (arr[i] == obj) { 26 return i; 27 } 28 } 29 }, 30 getParam: function() { 31 $('#bgWidth').val(function() { 32 return $('.bg').find('img').css('width') || 0; 33 }); 34 $('#bgHeight').val(function() { 35 return $('.bg').find('img').css('height') || 0; 36 }); 37 $('#giftWidth').val(function() { 38 return $('#gift-list').find('img').css('width') || 0; 39 }); 40 $('#giftHeight').val(function() { 41 return $('#gift-list').find('img').css('height') || 0; 42 }); 43 $('#giftNum').val(function() { 44 return $('#gift-list').find('img').size(); 45 }) 46 }, 47 readFile: function() { //读取图片显示图片 48 var _this = this; 49 var reader = new FileReader(); 50 var f = _this.files[0]; 51 if (!/image/w+/.test(f.type)) { 52 alert("文件必须为图片！"); 53 return false; 54 } else { 55 reader.onload = function(e) { 56 var data = e.target.result; 57 var image = new Image(); 58 image.onload = function() { 59 var width = image.width, 60 height = image.height; 61 $(_this).parents('.item-content').next('.img-hold').find('img').css({ 62 'width': width, 63 'height': height 64 }); 65 A.getParam(); 66 }; 67 image.src = data; 68 var imgHtml = '<img src="' + this.result + '" alt=""/>'; 69 $(_this).parents('.item-content').next('.img-hold').html('').append(imgHtml); 70 } 71 reader.readAsDataURL(f); 72 var fileName = _this.value.split('\').pop(); //获取文件选择框的值 73 $(_this).parents('.item-content').find('.filename').text(fileName); //填充图片预览 74 } 75 }, 76 addItem: function() { 77 var i = $('.item-title').size() + 1; 78 var _html = '<li><span class="item-title">图片' + i + '：</span><span class="item-content"><span class="fileWrapper"><span class="input-file">选择文件<input type="file" hidefocus="true" value="" class="select-file"></span></span><i class="filename"></i></span><div class="img-hold"></div><div class="oprate"><a href="javascript:;" class="add-btn">增加</a><a href="javascript:;" class="delete-btn">删除</a></div></li>'; 79 $('#gift-list').append(_html); 80 }, 81 removeItem: function() { 82 var left = $('#gift-list li').size(); 83 if (left <= 1) { 84 alert('只有一个了哦！') 85 } else { 86 $(this).parents('li').remove(); 87 $('#giftNum').val(left - 1); 88 $('.item-title').each(function(i) { 89 $(this).text('图片' + (i + 1) + '：'); 90 }); 91 } 92 }, 93 getJsImageObj: function() { 94 var arr = []; 95 var oImg = $('#gift-list').find('img'); 96 for (var i = 0; i < oImg.length; i++) { 97 arr.push(oImg[i]); 98 } 99 return arr; 100 }, 101 convertImageToCanvas: function() { //生成两个画布 102 var context = document.getElementById('canvas'); 103 var ctx = context.getContext("2d"); 104 var ctxWidth = parseInt(document.getElementById('bgWidth').value); 105 var ctxHeight = parseInt(document.getElementById('bgHeight').value); 106 var image = $('.bg').find('img')[0]; //jq 转 js 对象 107 context.setAttribute('width', ctxWidth); //绘制画布的宽度 108 context.setAttribute('height', ctxHeight); //绘制画布的高度 109 ctx.clearRect(0, 0, ctxWidth, ctxHeight); //画布某某个范围内的内容,参数分别为x,y,宽度,高度 110 ctx.drawImage(image, 0, 0); //绘制大背景 111 A.printGift(); //打印图片 112 }, 113 printGift: function() { 114 var displaceNum = document.getElementById('displaceNum').value || 0; 115 var scaleWidth = document.getElementById('scaleWidth').value || 0; 116 var scaleHeight = document.getElementById('scaleHeight').value || 0; 117 var context = document.getElementById('canvas'); 118 var ctx = context.getContext("2d"); 119 var deg = 360 / parseInt(document.getElementById('giftNum').value); //旋转角度 120 var ctxWidth = parseInt(document.getElementById('bgWidth').value); 121 var ctxHeight = parseInt(document.getElementById('bgHeight').value); 122 var objGift = A.getJsImageObj(); 123 ctx.translate(ctxHeight / 2, ctxHeight / 2); //确定中心点中心点 124 for (var i = 0; i < objGift.length; i++) { //循环绘制礼物小图 125 ctx.save(); 126 ctx.rotate((deg * i) * Math.PI / 180); 127 ctx.translate(0, -displaceNum); 128 ctx.drawImage(objGift[i], -objGift[i].width / 2 * scaleWidth, -objGift[i].height / 2 * scaleHeight, objGift[i].width * scaleWidth, objGift[i].height * scaleHeight); //离中心点的参数也需要可以配置,参数：图片地址，离中心点X，离中心点y,图片width伸缩，图片height伸缩 129 ctx.restore(); 130 } 131 }, 132 convertCanvasToImage: function(canvas) { //canvas 转 image ,暂时只能转png 133 var image = new Image(); 134 image.src = canvas.toDataURL("images/png"); 135 return image; 136 } 137 } 138 A.init();
样式就自己美化了哦，然后别忘添加JQ库噢！