使用Canvas操作并显示图像

最新推荐文章于 2024-05-10 16:10:57 发布

gc_2299

最新推荐文章于 2024-05-10 16:10:57 发布

阅读量3.3k

点赞数 2

分类专栏：网页编程文章标签： Canvas 图像

本文链接：https://blog.csdn.net/gc_2299/article/details/112001116

版权

网页编程专栏收录该内容

137 篇文章 8 订阅

订阅专栏

上一篇文章《使用Canvas绘制调色板和工艺卡片（续）》中绘制工艺卡片过程中同时在卡片的图形区域绘制了两个零件图形，使用的是Canvas中的drawImage函数。
需要注意的是绘制图像的代码并不是在window.onload事件中运行，而是在图像的onload事件中运行，避免图片没有加载完就绘制图像。

	image2.onload = function ()
    {
        cxt.drawImage(image2,startX+401,startY+51,399,222);
    }

上面的drawImage用法并不是drawImage的完整参数形式，其完整参数形式如下所示（截图来自参考文献2）：
在这里插入图片描述
drawImage函数的用法有三种：

按图片原始尺寸绘制。调用drawImage函数时只需输入3个参数，即图形对象以及绘制图形时的左上角坐标，此时绘制的图形尺寸为图形的原始尺寸；
按指定大小绘制图片。调用drawImage函数时需要输入5个参数，即图形对象以及绘制图形的区域矩形信息（左上角坐标、宽度和高度），此时是将图片绘制在指定大小的区域内，实际上是在做图片缩放，上一篇文章中绘制工艺卡片中的零件图形时就是采用的本方式;
绘制图片部分内容。调用drawImage函数时需要输入完整的9个参数，从上面图片中的参数名称即可看出，此时函数的作用是截图图形指定区域中的内容绘制到给定的目标矩形中。

上述介绍的Canvas的drawImage的三种用法和C#中Graphics类提供的DrawImage函数功能类似（后者提供的重载功能更多）。

	DrawImage(Image, Point) 	//在指定的位置使用原始物理大小绘制指定的 Image。
	DrawImage(Image, Rectangle) //在指定位置并且按指定大小绘制指定的 Image。
	DrawImage(Image, Rectangle, Rectangle, GraphicsUnit) //在指定位置并且按指定大小绘制指定的 Image 的指定部分。

平铺图片

在C#中填充区域主要使用画刷类，可以用纯色填充、线性渐变填充、路径渐变填充，也能用纹理填充，即TextureBrush类，详情请查看参考文献7。

TextureBrush 类的每个属性都是 Brush 对象，这种对象使用图像来填充形状的内部。此类不能被继承。

Canvas中的填充函数也有类似功能（不过没有C# GDI+功能那么多），纯色填充、线性渐变填充、径向渐变填充，除此之外，也支持图片填充，也即平铺图片。
最好也是在图片的onload事件中调用平铺图片的相关代码，主要调用的是Canvas中的createPattern函数设置图片平铺模式（水平重复绘制、垂直重复绘制、水平垂直都重复绘制以及仅绘制一次），然后将createPattern函数返回值赋给fillStyle属性即可，具体的代码可以从参考文献2中看到。
另外，图片不光可以填充图形，也能填充文本，之前的文章也提到过，Canvas绘制文本也有两种方式：描边方式（strokeText）和实心方式（fillText），后者调用之前，可以设置fillStyle属性的平铺图片的方式。

切割图片

C#Graphics类中有Clip属性，该属性是Region类型。设置了该属性值后，后面再绘制图形或文本时，仅显示在Clip区域内的内容，区域外的内容不会显示，代码示例可以查看参考文献6。
在这里插入图片描述
在Canvas中也能实现类似的功能，使用的是clip函数。大致调用思路是先绘制一个基本图形作为剪切区域，然后调用clip函数，最后再绘制想要绘制的内容。这样就只会在剪切区域内显示绘制内容，超出剪切区域的就不会显示。具体的效果如下图所示（图形来自参考文献8，其中也有详细的示例代码）。
在这里插入图片描述

参考文献
[1]从0到1 HTML5 Canvas动画开发
[2]https://www.runoob.com/tags/ref-canvas.html
[3]https://docs.microsoft.com/zh-cn/dotnet/api/system.drawing.graphics.drawimage?view=dotnet-plat-ext-3.1
[4]https://docs.microsoft.com/zh-cn/dotnet/api/system.drawing.texturebrush.-ctor?view=netframework-3.5#System_Drawing_TextureBrush__ctor_System_Drawing_Image_System_Drawing_Drawing2D_WrapMode_
[5]https://docs.microsoft.com/zh-cn/dotnet/api/system.drawing.graphics.clip?view=netframework-3.5#–
[6]https://www.jb51.net/article/67765.htm
[7]https://docs.microsoft.com/zh-cn/dotnet/api/system.drawing.texturebrush?view=dotnet-plat-ext-5.0#definition
[8]https://www.runoob.com/try/try.php?filename=tryhtml5_canvas_clip