首页 > 代码库 > [ html canvas 案例 -- 绘制文本图片 ] canvas案例 -- 绘制文本图片演示
[ html canvas 案例 -- 绘制文本图片 ] canvas案例 -- 绘制文本图片演示
1 <!DOCTYPE html> 2 <html lang=‘zh-cn‘> 3 <head> 4 <title>Insert you title</title> 5 <meta name=‘description‘ content=‘this is my page‘> 6 <meta name=‘keywords‘ content=‘keyword1,keyword2,keyword3‘> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 8 <link rel=‘stylesheet‘ type=‘text/css‘ href=http://www.mamicode.com/‘./css/index.css‘ />"color: #008080;"> 9 <script type=‘text/javascript‘ src=http://www.mamicode.com/‘./js/jquery-1.12.1.min.js‘></script>"color: #008080;"> 10 <style type=‘text/css‘> 11 html,body,canvas,div,select,option { 12 margin: 0; padding: 0; 13 } 14 15 html { 16 height: 100%; 17 } 18 19 body { 20 background: #666; 21 } 22 23 #wrap { 24 width: 1000px; height: 630px; margin: 15px auto; border-radius: 3px; 25 } 26 27 #can { 28 background: #FFF url(‘./images/1.jpg‘) no-repeat center; background-size: cover; display: block; 29 display: block; outline: none; -webkit-outline: none; 30 } 31 32 #translate { 33 margin: 5px auto; width: 85%; text-align: center; 34 } 35 36 label { 37 font: 400 13px/1.2em ‘Courier New‘; color: #FFF; cursor: pointer; 38 } 39 40 input,select { 41 color: #000; font: 400 11px/1.2em ‘Courier New‘; padding: 2px 8px; vertical-align: middle; 42 } 43 </style> 44 45 </head> 46 <body onl oad=‘drawImage();‘> 47 <div id=‘wrap‘> 48 <canvas id=‘can‘ width=‘1000‘ height=‘600‘>检测到您的浏览器版本过低请升级您的浏览器以获取更好的用户体验...</canvas> 49 <div id=‘translate‘> 50 <label for=‘#content‘>请输入您关心的内容:</label> 51 <input type=‘text‘ id=‘content‘ placeholder=‘请输入您关心的内容‘ autocomplete=‘on‘ autofocus="autofocus" /> 52 <label for=‘select‘>请选择您喜欢的背景:</label> 53 <select id=‘select‘> 54 <option>1.jpg</option> 55 <option>2.jpg</option> 56 <option>3.jpg</option> 57 <option>4.jpg</option> 58 <option>5.jpg</option> 59 <option>6.jpg</option> 60 </select> 61 </div> 62 </div> 63 </body> 64 <script type=‘text/javascript‘> 65 var oDiv = $( ‘#wrap‘ ); 66 var can = $( ‘#can‘ ).get( 0 ); 67 var oCan = can.getContext( ‘2d‘ ); 68 var oContent = $( ‘#content‘ ).get( 0 ); 69 var oSelect = $( ‘#select‘ ).get( 0 ); 70 oContent.onkeydown = function(){ 71 oCan.clearRect( 0 , 0 , can.width , can.height ); 72 this.onkeyup = function(){ 73 var text = oContent.value; 74 var num = Math.ceil( can.width / text.length ) < 40 ? 40 : Math.ceil( can.width 75 / text.length ); 76 oCan.font = ‘900 ‘ + num + ‘px Courier New‘; 77 oCan.fillStyle = getRandomColor(); 78 oCan.textAlign = ‘center‘; 79 oCan.textBaseline = ‘middle‘; 80 oCan.fillText( text , can.width / 2 , can.height / 2 ); 81 }; 82 }; 83 function getRandomColor(){ 84 var setFillSeat = ‘‘; 85 var str = ‘0xFFFFFF‘; /* 在这里不要使用 "#" */ 86 var num = ( Math.floor( Math.random() * parseInt( str , 16 ) ) ).toString( 16 ) 87 .toLocaleUpperCase(); 88 var length = num.length; 89 for( var i = 0 ; i < 6 - length ; i++ ){ 90 setFillSeat += 0; 91 } 92 return ‘#‘ + num + setFillSeat; 93 } 94 function drawImage(){ 95 for( var i = 0 ; i < oSelect.children.length ; i++ ){ 96 oSelect.children[ i ].index = i; 97 oSelect.children[ i ].onclick = function(){ 98 can.style.background = ‘url(./images/‘ + ( this.index + 1 ) 99 + ‘.jpg) no-repeat center‘;100 }101 }102 }103 </script>104 </html>
[ html canvas 案例 -- 绘制文本图片 ] canvas案例 -- 绘制文本图片演示
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。