一个菜鸟的互联网技术分享博客
您的位置: 主页 > canvas作图
advertisement

canvas作图

代码如下:

  1. <script type="text/javascript">  
  2.     window.onload=function(){  
  3.         var c=document.getElementById("Can");  
  4.         var ctx=c.getContext("2d");  
  5.         // 设置画布宽高,不能再style和css里面设置画布宽高,文字和图片会失真。  
  6.         c.width = 456;  
  7.         c.height = 810;  
  8.           
  9.         var img = new Image();  
  10.         img.src = "images/ssss_logo.jpg";  
  11.         img.onload = () =>{  
  12.             ctx.drawImage(img,19,16,109,31);  
  13.             draw1();  
  14.         }  
  15.         function draw1(){  
  16.             var img1 = new Image();  
  17.             img1.src = "images/pay.jpg";  
  18.             img1.onload = () =>{  
  19.                 ctx.drawImage(img1,65,60,326,326);  
  20.                 draw2();  
  21.                 draw3();  
  22.             }  
  23.         }  
  24.         function draw3(){  
  25.             var img3 = new Image();  
  26.             img3.src = "images/slogen.png";  
  27.             img3.onload = () =>{  
  28.                 ctx.drawImage(img3,260,700,144,53);  
  29.             }  
  30.         }  
  31.         ctx.font="12px SourceHanSansCN-Regular";  
  32.         ctx.fillStyle="#999999";  
  33.         ctx.fillText("产品价格:",153,412);  
  34.   
  35.         ctx.font="12px Verdana";  
  36.         ctx.fillStyle="#F46322";  
  37.         ctx.fillText("¥",210,414);  
  38.   
  39.         ctx.font="24px Verdana";  
  40.         ctx.fillStyle="#F46322";  
  41.         ctx.fillText("5000",222,415);  
  42.   
  43.         ctx.font="12px Verdana";  
  44.         ctx.fillStyle="#F46322";  
  45.         ctx.fillText(".00",283,415);  
  46.   
  47.         ctx.font="12px Verdana";  
  48.         ctx.fillStyle="#999999";  
  49.         ctx.fillText("成单量",64,444);  
  50.   
  51.         ctx.font="12px Verdana";  
  52.         ctx.fillStyle="#666666";  
  53.         ctx.fillText("+",106,444);  
  54.   
  55.         ctx.font="normal bold 18px sans-serif";  
  56.         ctx.fillStyle="#666666";  
  57.         ctx.fillText("888",115,446);  
  58.   
  59.         ctx.font="12px Verdana";  
  60.         ctx.fillStyle="#999999";  
  61.         ctx.fillText("案例数",186,444);  
  62.   
  63.         ctx.font="12px Verdana";  
  64.         ctx.fillStyle="#666666";  
  65.         ctx.fillText("+",228,444);  
  66.   
  67.         ctx.font="normal bold 18px sans-serif";  
  68.         ctx.fillStyle="#666666";  
  69.         ctx.fillText("888",237,446);  
  70.   
  71.         ctx.font="12px Verdana";  
  72.         ctx.fillStyle="#999999";  
  73.         ctx.fillText("顾问人员",306,444);  
  74.   
  75.         ctx.font="12px Verdana";  
  76.         ctx.fillStyle="#666666";  
  77.         ctx.fillText("+",356,444);  
  78.   
  79.         ctx.font="normal bold 18px sans-serif";  
  80.         ctx.fillStyle="#666666";  
  81.         ctx.fillText("88",365,446);  
  82.   
  83.         var str = "淘宝代运营的作用就是把店铺交给专业的团队帮你操作店铺,使得店铺提高收益,比如优化直通车的名词,以及限量刷单,把店铺推上排行获得自然搜索流量";  
  84.         var textWidth = 416;  
  85.         var cx = 20;  
  86.         var cy = 478;  
  87.         ctx.font = "20px STKaiti";  
  88.         ctx.lineWidth = 30;  //设置行间距(不可以缺少)  
  89.         ctx.textBaseline = "top";  //基线对其  
  90.         while (str.length>0) {  
  91.             for (var i = 0; i < str.length; i++)  
  92.                 if (ctx.measureText(str.substring(0,i+1)).width>textWidth)  
  93.                     break;  
  94.             ctx.fillText(str.substring(0,i),cx,cy);  
  95.             str = str.substring(i);  
  96.             cy += ctx.lineWidth;  
  97.         }  
  98.   
  99.         function draw2() {  
  100.             function circleImg(ctx, img2, x, y, r) {  
  101.                 ctx.save();  
  102.                 var d = 2 * r;  
  103.                 var cx = x + r;  
  104.                 var cy = y + r;  
  105.                 ctx.arc(cx, cy, r, 0, 2 * Math.PI);  
  106.                 ctx.clip();  
  107.                 ctx.drawImage(img2, x, y, d, d);  
  108.                 ctx.restore();  
  109.             }  
  110.   
  111.             var img2 = new Image();  
  112.             img2.src = 'images/pay.jpg';  
  113.             var canvas1 = document.querySelector("#Can");  
  114.             var context1 = canvas1.getContext("2d");  
  115.             circleImg(context1, img2, 20, 725, 32);  
  116.         }  
  117.         ctx.font="normal bold 14px sans-serif";  
  118.         ctx.fillStyle="#333333";  
  119.         ctx.fillText("张仁",91,718);  
  120.   
  121.         ctx.font="normal bold 14px sans-serif";  
  122.         ctx.fillStyle="#666666";  
  123.         ctx.fillText("您的专属顾问",91,741);  
  124.   
  125.         ctx.font="14px Verdana";  
  126.         ctx.fillStyle="#666666";  
  127.         ctx.fillText("400-0512-944",91,763);  
  128.     }  
  129. </script>  

html代码就省略了,就是页面里面加一个<canvas></canvas>,直接上js代码,但是存在少许注意点:飞向注意点

zhangren.online
上一篇:canvas的drawImage无法显示图像
下一篇:使input文本框不可编辑的3种方法

您可能喜欢

​JS数组去重的几种常见方法

​JS数组去重的几种常见方法

​CSS控制文字,超出部分显示省略号

​CSS控制文字,超出部分显示省略号

​Web前端经典面试试题及答案

​Web前端经典面试试题及答案

​canvas的drawImage无法显示图像

​canvas的drawImage无法显示图像

回到顶部