Canvas 位图填充

谁践踏了优雅 2022-05-12 00:38 278阅读 0赞

**一 位图填充方法**

1、调用createPattern方法创建位图填充，该方法返回一个CanvasPattern对象。

2、将CanvasPattern对象赋值给CanvasRenderingContext2D的fillStyle或StrokeStyle属性。

**二 代码**

<!DOCTYPE html>
    <html>
    <head>
    	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    	<title> 位图填充 </title>
    </head>
    <body>
    <h2> 位图填充 </h2>
    <canvas id="mc" width="400" height="280"
    	style="border:1px solid black"></canvas>
    <script type="text/javascript">
    	// 获取canvas元素对应的DOM对象
    	var canvas = document.getElementById('mc');
    	// 获取在canvas上绘图的CanvasRenderingContext2D对象
    	var ctx = canvas.getContext('2d');
    	ctx.save();
    	ctx.translate(30 , 20);
    	var image = new Image();
    	image.src = "wjc.gif";
    	image.onload = function()
    	{
    		// 创建位图填充
    		imgPattern = ctx.createPattern(image, "repeat");
    		// 设置使用位图填充作为填充颜色
    		ctx.fillStyle = imgPattern;
    		// 填充一个矩形
    		ctx.fillRect(0 , 0 , 160 , 80);
    		// 恢复坐标系统
    		ctx.restore();
    		// 平移坐标系统
    		ctx.translate(280 , 160)
    		ctx.beginPath();
    		// 添加圆弧
    		ctx.arc(0 , 0  , 80 , 0 , Math.PI * 2 , true);
    		ctx.closePath();
    		ctx.lineWidth = 12;
    		// 设置使用位图填充作为边框颜色
    		ctx.strokeStyle = imgPattern;
    		ctx.stroke();
    	}
    </script>
    </body>
    </html>

**三 运行结果**

![039ae14d-a7ca-3b67-a329-a289bac20e84.png][]

[039ae14d-a7ca-3b67-a329-a289bac20e84.png]: /images/20220512/016527900b334038a74d185cd14543f7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，278人围观）

还没有评论，来说两句吧...

相关阅读

相关说说在 Canvas 中如何填充渐变颜色

渐变颜色填充方式有两种：线性或径向。 1. 线性渐变填充会创建一个水平、垂直或者对角线的填充图案。 2. 径向渐变填充会自中心点创建一个放射状填充图案。 1 线性

我会带着你远行/ 2022年12月12日 13:43/ 0 赞/ 652 阅读

相关 canvas 圆角矩形填充_canvas-绘制矩形及弧形

矩形是唯一一种可以直接在 2D 上下文中绘制的形状。与矩形有关的方法包括 fillRect() 、strokeRect() 和 clearRect() 这三个方法都能接收 4

谁借莪１个温暖的怀抱￠/ 2022年11月06日 01:57/ 0 赞/ 496 阅读

相关 24位位图转8位灰度图

如何用RGB转化得到的灰度数据写入8位bmp文件，请看如下代码其中lp中存储的是已经转化得到的现成灰度数据，标红的代码是与24位位图不同的地方。 <span st

た入场券/ 2022年08月05日 08:47/ 0 赞/ 258 阅读

相关位图

最近遇到一道题卡空间卡的很厉害，在网上搜了一下，发现了一个叫做位图的数据结构。位图的原理就是用一个int的32个比特位表示0~31个数是否存在，1表示存在，0表示不存在。

﹏ヽ暗。殇╰゛Y/ 2022年06月10日 09:26/ 0 赞/ 228 阅读

相关 Canvas 输出位图

一介绍 toDataURL()是canvas中将图片的二进制格式转为dataURL格式使用的方法。 dataURL是将数据按base64进行编码，它是一种保存二进制的方式

- 日理万妓/ 2022年05月12日 00:40/ 0 赞/ 180 阅读

相关 Canvas 位图裁剪

一位图裁剪方法 1、将需要从位图上裁剪的部分定义成Canvas的路径。 2、调用CanvasRenderingContext2D的的clip（）方法把路径剪切出来。 3

川长思鸟来/ 2022年05月12日 00:40/ 0 赞/ 215 阅读

相关 Canvas 位图填充

一位图填充方法 1、调用createPattern方法创建位图填充，该方法返回一个CanvasPattern对象。 2、将CanvasPattern对象赋值给Canvas

谁践踏了优雅/ 2022年05月12日 00:38/ 0 赞/ 279 阅读

相关位图

位图位图是一种很特殊的数据结构，可以

秒速五厘米/ 2022年03月29日 04:54/ 0 赞/ 279 阅读

相关 Canvas—描边与填充

文章目录描边 stroke strokeStyle strokeRect 填充 fill fillRect

ゝ一世哀愁。/ 2021年12月15日 16:15/ 0 赞/ 1175 阅读

相关 canvas雷达图

html <div class="title">墨言战力图</div> <canvas id="myCanvas" width="400" height=

以你之姓@/ 2021年09月16日 11:50/ 0 赞/ 495 阅读