files/zh-cn/web/api/canvasrenderingcontext2d/createimagedata/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

---
title: CanvasRenderingContext2D.createImageData()
slug: Web/API/CanvasRenderingContext2D/createImageData
tags:
  - API
  - Canvas
  - CanvasRenderingContext2D
translation_of: Web/API/CanvasRenderingContext2D/createImageData
---
<div>{{APIRef}}</div>

<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.createImageData()</code></strong> 是 Canvas 2D API 创建一个新的、空白的、指定大小的 {{domxref("ImageData")}} 对象。 所有的像素在新对象中都是透明的。</p>

<h2 id="语法">语法</h2>

<pre class="syntaxbox">ImageData <var><em>ctx</em>.createImageData(width, height);</var>
ImageData <var><em>ctx</em>.createImageData(imagedata);</var>
</pre>

<h3 id="参数">参数</h3>

<dl>
 <dt><code>width</code></dt>
 <dd>{{domxref("ImageData")}} 新对象的宽度。</dd>
 <dt><code>height</code></dt>
 <dd>{{domxref("ImageData")}} 新对象的高度。</dd>
 <dt><code>imagedata</code></dt>
 <dd>从现有的 {{domxref("ImageData")}} 对象中，复制一个和其宽度和高度相同的对象。图像自身不允许被复制。</dd>
</dl>

<h3 id="返回值">返回值</h3>

<p>指定了宽度和高度的，新的 {{domxref("ImageData")}} 对象。 新对象使用透明的像素进行填充。</p>

<h3 id="抛出错误">抛出错误</h3>

<dl>
 <dt><code>IndexSizeError</code></dt>
 <dd>如果宽度或者高度变量值为零，会抛出此异常。</dd>
</dl>

<h2 id="示例">示例</h2>

<h3 id="使用_createImageData_方法">使用 <code>createImageData</code> 方法</h3>

<p>这是一段简单地使用 <code>createImageData</code> 方法的代码片段。 获取更多信息，请看 <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">canvas像素控制</a> 和 {{domxref("ImageData")}} 对象。</p>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
</pre>

<h4 id="JavaScript">JavaScript</h4>

<pre class="brush: js; highlight:[6]">var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.rect(10, 10, 100, 100);
ctx.fill();

console.log(ctx.createImageData(100, 100));
// ImageData { width: 100, height: 100, data: Uint8ClampedArray[40000] }
</pre>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-createimagedata", "CanvasRenderingContext2D.createImageData")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容">浏览器兼容</h2>

<div class="hidden">
<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
</div>

<p>{{Compat("api.CanvasRenderingContext2D.createImageData")}}</p>

<h3 id="兼容性注解">兼容性注解</h3>

<ul>
 <li>从 {{geckoRelease("5.0")}}开始：
  <ul>
   <li>如果矩形小于指定的1个像素，<code style="font-style: normal;">createImageData()</code> 会返回图像数据至少1个像素值。</li>
   <li>当调用 <code style="font-style: normal;">createImageData()</code> 指定非限制值时，会抛出<code style="font-style: normal;">NOT_SUPPORTED_ERR</code> exception异常。</li>
   <li><code>createImageData()</code> 根据规定处理负数变量，会围绕对称轴翻转矩形区域。</li>
  </ul>
 </li>
</ul>

<h2 id="参见">参见</h2>

<ul>
 <li>接口定义，{{domxref("CanvasRenderingContext2D")}}.</li>
 <li>{{domxref("ImageData")}}</li>
 <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">canvas像素控制</a></li>
</ul>