一 位图填充方法
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>
三 运行结果
相关推荐
4. **位图填充**： `createPattern()`方法用于使用图像作为填充图案。传入一个图像元素（`Image`对象）和重复模式（如`repeat`、`repeat-x`、`repeat-y`、`no-repeat`），生成的图案可以应用到`fillStyle`，实现...
Canvas实际上是一个TCanvas对象，是VCL（Visual Component Library）框架的一部分，它允许开发者在各种图形表面如窗体、控件或者位图上进行绘图。本篇文章将深入探讨如何使用Delphi的Canvas来绘制基本图元，包括点、...
在Delphi编程环境中，Canvas对象是用于图形绘制的核心组件，特别是在处理位图、画布和其他图形表面时。这个“Delphi Canvas方法在图片上写入文字.rar”压缩包可能包含了如何利用Canvas对象在图片上添加文本的示例...
Canvas对象在Delphi中主要负责提供绘图上下文，它可以是屏幕、打印机、位图或其他任何可以接受绘图操作的表面。通过Canvas，你可以绘制线条、形状、文本、图像，并进行填充、描边、旋转等复杂的绘图操作。例如，如果...
Canvas类提供了各种方法，让我们能够绘制线条、形状、文本以及位图等。本篇将深入探讨`Android Canvas绘图`的相关知识点，包括基本概念、常用方法以及实际应用。 一、Canvas基础 1. `Canvas`对象：在Android中，`...
6. **图像支持**：除了基本图形外，`canvas`还可以显示位图或PNG等图像格式，这在创建包含图像的复杂布局时非常有用。 7. **动画**：通过不断更新`canvas`上的图形，可以实现动画效果，比如滑动、旋转或淡入淡出等...
2. **Canvas.cpp**：Canvas是图形绘制的核心类，很可能包含了一系列的绘图方法，如画线、填充、绘制图形等。它是整个项目中图形操作的入口点。 3. **CanvasThreadDlg.cpp**：这个名字暗示了它可能与多线程对话框...
在这个例子中，我们首先设置了`Canvas`的`Brush.Color`属性为`clRed`，这意味着绘制的图形将被填充为红色；接着设置`Pen.Color`为`clBlue`，这样绘制的轮廓线将显示为蓝色；最后调用`Canvas.Rectangle()`方法绘制了...
- `setColor()`: 设置当前颜色，用于后续的填充操作。 - `setStrokeWidth()`: 设置线条宽度。 - `setPaint()`: 使用Paint对象设置更复杂的绘图属性，如颜色、样式、抗锯齿、文本大小等。 - `save()`: 保存Canvas...
在Canvas上，我们可以使用`fillStyle`、`strokeStyle`等属性来改变颜色，使用`beginPath()`、`moveTo()`、`lineTo()`等方法来描绘路径，以及`fill()`或`stroke()`来填充或描边。 另一份资源"酷炫的html5 canvas全屏...
8. **位图操作**：`drawBitmap(Bitmap bitmap, float left, float top, Paint paint)`可以将位图绘制到Canvas上。`drawBitmap(Bitmap bitmap, Matrix matrix, Paint paint)`允许通过Matrix进行位图的缩放、旋转等...
- Canvas元素：HTML5新增的Canvas元素提供了通过脚本（通常为JavaScript）动态绘制图形的能力，包括2D图形和位图。 - 绘图上下文（context）：使用`getContext('2d')`方法获取Canvas元素的绘图上下文，它是进行...
Canvas是Android的图形系统的一部分，允许开发者在内存中的Bitmap上进行各种图形操作，如线条、圆形、文字和位图的绘制。首先，我们需要创建一个Bitmap对象，然后获取Canvas实例，通常通过Bitmap的`createCanvas()`...
在Android开发中，`Paint`和`Canvas`是两个非常重要的图形绘制类，它们共同协作在屏幕上绘制出丰富多彩的UI元素。本篇文章将对`Paint`和`Canvas`的使用进行详细总结，帮助开发者深入理解这两者的功能和用法。 首先...
首先，Canvas可以理解为一个画板，开发者可以通过它来绘制各种形状、线条、文字、位图等元素。在Android中，Canvas与Bitmap紧密关联，Bitmap就像是画布，而Canvas则是握在手中的画笔。通过Canvas提供的API，我们可以...
除了基本的绘图操作，Canvas还支持位图操作（如drawBitmap）、路径操作（Path）和矩阵变换（Matrix），这些组合起来能创造出复杂的图形和动画效果。例如，你可以利用Canvas和Paint结合动态改变颜色、透明度，或者...
此外，Canvas还提供了位图操作，如绘制Bitmap、缩放、旋转、裁剪等。例如，加载一张图片并将其绘制到Canvas上： ```java Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.image); canvas...
Flex Canvas 精灵演示是基于Adobe Flex技术创建的一个互动展示，主要展示了如何在Canvas组件中使用精灵（Sprite）进行动态图形的制作和动画效果的实现。Flex是一种用于构建富互联网应用程序（RIA）的开放源代码框架...
Bitmap是Android中的位图图像类，用于存储像素数据。它可以加载本地或网络的图片资源，也可以由开发者动态生成。Canvas可以与Bitmap结合，将图像绘制到屏幕上。Bitmap有多种配置模式，如ARGB_8888、RGB_565等，选择...
HTML5 Canvas是一个强大的Web图形接口，它允许开发者在网页上绘制矢量图形和位图图像。这本书《HTML5 Canvas Cookbook》是专为那些希望深入掌握Canvas技术的前端开发者准备的实用指南。书中涵盖了一系列的实例和技巧...