canvas应用图像与色彩

最新推荐文章于 2024-11-27 14:14:19 发布

原创最新推荐文章于 2024-11-27 14:14:19 发布 · 769 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #Canvas #drawImage #Shadows #图像色彩

HTML5 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用HTML5 Canvas进行绘图，包括加载图片、设置透明度、线样式及阴影效果等高级技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.canvas中可以引入图片，可以通过获取本页面中的图片也可以通过javascript新建图片。

2.获得图片后就可以把图片渲染到canvas里。

3.drawImage(image, x, y)：

image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。

例子：

     <!DOCTYPE html>
     <html>
     <body>

         <canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
             Your browser does not support the HTML5 canvas tag.
         </canvas>

         <script>
		var c=document.getElementById("myCanvas"),
		    ctx=c.getContext("2d"); 
		    var img = new Image();
		    img.src = 'https://developer.mozilla.org/samples/canvas-tutorial/images/backdrop.png';   
			  img.onload = function(){
			    ctx.drawImage(img,0,0);
			    ctx.beginPath();
			    ctx.moveTo(30,96);
			    ctx.lineTo(70,66);
			    ctx.lineTo(103,76);
			    ctx.lineTo(170,15);
			    ctx.stroke();
			  }         	    
         </script>

       </body>
       </html>

效果为：

drawImage(image, x, y, width, height)：

后面的width与height表示图片的宽与高。

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)：

4.一旦设置了 strokeStyle 或者 fillStyle 的值，那么这个新值就会成为新绘制的图形的默认值。如果要给每个图形上不同的颜色，则需要重新设置 fillStyle 或 strokeStyle 的值。

5.globalAlpha设置透明，比如：

例子：

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
	var c=document.getElementById("myCanvas"),
	    ctx=c.getContext("2d"); 
	ctx.fillStyle = '#FD0';
	ctx.fillRect(0,0,75,75);
	ctx.fillStyle = '#6C0';
	ctx.fillRect(75,0,75,75);
	ctx.fillStyle = '#09F';
	ctx.fillRect(0,75,75,75);
	ctx.fillStyle = '#F30';
	ctx.fillRect(75,75,75,75);
	ctx.fillStyle = '#FFF';
 
        ctx.globalAlpha = 0.2;//设置透明度
 
	for (var i=0;i<7;i++){
		ctx.beginPath();
		ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
		ctx.fill();
	}
</script>
</body>
</html>

效果为：

6.也可以通过 rgba()设置透明度， rgba(r,g,b,a)中a,b,c分别表示三种颜色的分量，a表示透明度，

从0.0-1.0。

7.可以通过一系列属性来设置线的样式：

lineWidth = value;//设置线的粗细，属性值必须为正数，默认值是1

lineCap = type;//线段端点显示的样子。它可以为：butt，round 和 square。默认原来butt。

最左边的线用了默认的 butt 。可以注意到它是与辅助线齐平的。中间的是 round 的效果，端点处加上了半径为一半线宽的半圆。右边的是 square 的效果，端点处加上了等宽且高度为一半线宽的方块。

lineJoin = type;//图形中两线段连接处所显示的样子。可以是：round, bevel ,miter。默认是 miter。

最上面一条是 round 的效果，边角处被磨圆了，圆的半径等于线宽。中间和最下面一条分别是 bevel 和 miter 的效果。当值是 miter 的时候，线段会在连接处外侧延伸直至交于一点，延伸效果受到 miterLimit 属性的制约。

miterLimit = value;//设定外延交点与连接点的最大距离，如果交点距离大于此值，连接效果会变成了 bevel.

8.createPattern(image,type)

Image 可以是 Image 对象的引用或者 canvas 对象。Type 必须是下面的字符串值之一：repeat，repeat-x，repeat-y , no-repeat。

例子：

  
   <!DOCTYPE html>
  
  
   <html>
  
  
   <body>
  
  
   <canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
  
  
   Your browser does not support the HTML5 canvas tag.
  
  
   </canvas>
  
  
   <script>
  
  
    var c=document.getElementById("myCanvas"),
  
  
          ctx=c.getContext("2d"), 
  
  
                         img = new Image();
  
  
     img.src = 'https://developer.mozilla.org/files/222/Canvas_createpattern.png';
  
  
     img.onload = function(){
  
  
                                var ptrn = ctx.createPattern(img,'repeat');
  
  
     ctx.fillStyle = ptrn;
  
  
    ctx.fillRect(0,0,300,300);
  
  
           }
  
  
   </script>
  
  
   </body>
  
  
   </html>

背景图片为：

效果为：

9.阴影 Shadows：

shadowOffsetX = float

shadowOffsetY = float

shadowBlur = float

shadowColor = color

shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，他们默认都是 0。

shadowBlur 用于设定阴影的模糊程度，其数值并不跟像素数量挂钩，也不受变换矩阵的影响，默认为 0。

shadowColor 用于设定阴影效果的延伸，值可以是标准的 CSS 颜色值，默认是全透明的黑色。

例子：

 
  
   <!DOCTYPE html>
  
  
   <html>
  
  
   <body>
  
  
   <canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
  
  
   Your browser does not support the HTML5 canvas tag.
  
  
   </canvas>
  
  
   <script>
  
  
    var c=document.getElementById("myCanvas"),
  
  
        ctx=c.getContext("2d");
  
  
      ctx.shadowOffsetX = 2;
  
  
      ctx.shadowOffsetY = 2;
  
  
      ctx.shadowBlur = 2;
  
  
      ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
  
  
      ctx.font = "20px Times New Roman";
  
  
      ctx.fillStyle = "Black";
  
  
      ctx.fillText("Sample String", 5, 30);
  
  
   </script>
  
  
   </body>
  
  
   </html>