html5绘制图像

快来打我* 2022-07-20 15:11 232阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        .canvas{
            border:1px solid #9c9898
        }
    </style>
    <script text="text/javascript">
        window.onload = function(){
            var canvas1 = document.getElementById('canvas1');
            var context1 = canvas1.getContext('2d');
            var recheight = 75;
            var recwidth = 150;
            context1.fillStyle = '#ff0000';
            //把坐标原点移至图形中心点
            context1.translate(canvas1.width/2,canvas1.height/2);
            //顺时针旋转45度
            context1.rotate(0.25*Math.PI);
            //坐标在纵向上缩短一半
            context1.scale(1,0.5);
            context1.fillRect(-recwidth/2,-recheight/2,recwidth,recheight);
            context1.globalCompositeOperation
        }
    </script>
    <body>
    <h3>绘制图型</h3>
    <ul>
        <p>图形的变换</p>
        <li>translate(x,y)可以将canvas原点，沿着横向或纵向移动到指定距离</li>
        <li>rotate()旋转图形</li>
        <li>scale(x,y)缩放图形,x,y表示横向纵向的缩放比例，小于1缩小，大于1放大</li>
        <li>save(),restore()方法可以实现对坐标变换状态的保存和恢复</li>
        <li>globalCompositeOperation()可以在一个图片上绘制图形</li>
        <li>clip()从原始画布中剪切任意的形状和尺寸，一旦剪切了某个区域，那么之后的绘图都会被限制到这块被剪切的区域内，不能访问画布的其他区域</li>
    </ul>
    <canvas class="canvas" id="canvas1" width="600" height="200"></canvas>
    </body>
    </html>

绘制图像和文字

<!DOCTYPE HTML>
    <html>
     <head>
      <title> canvase绘制图像 </title>
      <meta charset='utf-8'>
     </head>
     <style>
    	.canvas{
    		border:1px solid #9c9898
    	}
     </style>
     <script text="text/javascript">
       window.onload = function(){
          var canvas1 = document.getElementById('canvas1');
          var context1 = canvas1.getContext('2d');
          var imageObj = new Image();
          imageObj.src = '/7.jpg';
          imageObj.onload = function(){
              context1.drawImage(imageObj,10,10,70,100);
              context1.drawImage(imageObj,600,-600,1800,1600,150,10,200,100);
          }
    
          var canvas2 = document.getElementById('canvas2');
          var context2 = canvas2.getContext('2d');
          context2.font = 'italic 40px Arial';
          context2.fillStyle = '#ff0000';
          context2.fillText('Hello Binbin',50,100);
    
          context2.font = 'italic 40px Arial';
          context2.strokeStyle = '#0000ff';
          context2.lineWidth = 2;  //设置描边宽度
          context2.strokeText('Hello Binbin',300,100);
    
          var text = "You're going to get out of this... you're going to go on and you're going to make babies and watch them grow and you're going to die an old lady, warm in your bed. Not here. Not this night. Do you understand me";
          var maxwidth = 400;  //每一行绘制的宽度，超过就换行
          var lineheight = 25;  //每行间隔
          var x = 20;
          var y = 300;
    
        context2.font = '16px Arial';
        context2.fillStyle = '#333';
        wrapText(context2,text,x,y,maxwidth,lineheight);
        function wrapText(context,text,x,y,maxwidth,lineheight)
        {
         var words = text.split(" ");
         var line = "";
         for(var n=0;n<words.length;n++){
          var textline = line + words[n] + " ";
          var metrices = context.measureText(textline);
          var textwidth = metrices.width;
          if(textwidth > maxwidth)
          {
           context.fillText(line,x,y);
           line = words[n] + " ";
           console.log(words[n]);
           y += lineheight;
          }else
          {
           line = textline;
          }
         }
         context.fillText(line,x,y);
        }
       }
     </script>
    
     <body>
      <h3>绘制图像（与php中的GD差不多）</h3>
      <ul>
        <p>绘制图像的方法</p>
    	<li>context.drawImage(imageObj,x,y,width,height)。imageObj图片对象，
    	x,y是图片左上角的点在canvase里的坐标，width,height可选参数，表示图片尺寸大小
    	</li>
    	<li>context.drawImage(imageObj,sx,sy,sw,sh,dx,dy,dw,dh)对图片进行裁剪，s-源图片需要裁剪的尺寸w,h和需要从哪里开始的左上角点坐标x,y。d-是目标画布中需要放置的图片位置x,y还有大小尺寸w,h</li>
      </ul>
      <canvas class="canvas" id="canvas1" width="600" height="200"></canvas>
      <h3>绘制文本</h3>
      <ul>
        <p>绘制文本的方法</p>
    	<li>context.fillText(text,x,y),text需要绘制的文本，x,y文本的位置坐标
    	</li>
    	<li>文本的字体，样式，大小：font属性，属性值normal,italic,bold</li>
    	<li>字体颜色用fillstyle属性设置</li>
    	<li>描绘字体边缘效果：要使用strokeText()代替fillText()，并且strokeStyle属性代替fillStyle属性</li>
        <li>measureText()计算文本的尺寸对象，可以使用此函数计算何时换行</li>
      </ul>
    
     </body>
    </html>