Difference between revisions of "Canvas (简体中文)"
m (修改 bug)
 
(3 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
{{newin|[[0.8.0]]|080|type=type|text=由[[Framebuffer]]重命名而来}}
+
{{newin (简体中文)|[[0.8.0]]|080|type=type|text=从 [[Framebuffer]] 重命名而来}}
−
Canvas用于离屏渲染。可以把它看成是一种无形的屏幕，你可以在上面绘制一些东西，但直到你将它设置为可见的之前，它都不会被看见不可见的。它也被称为“纹理渲染(render to texture)”。
 
  
−
在Canvas上绘制一些不经常改变的东西（如背景图案）,然后再把Canvas绘制绘制出来来取代每个东西都独自绘制, 可以减少画面每帧拉伸操作的次数。
+
Canvas(画布)用于离屏渲染（就是不真正地绘制，只是把数据存储起来）。可以把它看成是一种无形的屏幕，你可以在上面绘制一些东西，但直到你将它绘制到实际的屏幕，它都不会被看见。它也被称为“纹理渲染(render to texture)”。
  
−
Canvases can be susceptible to [[PO2_Syndrome| power of 2 syndrome]]. Most graphics cards that support Canvas should have non-PO2 texture support. However, there are some old cards that do not. Check with [[love.graphics.isSupported|love.graphics.isSupported("npot")]] if it is supported.
+
在Canvas上绘制一些不经常改变（相对）位置的东西（如背景图案，蓝天，白云形成一个整体）,然后再把整个Canvas绘制出来。以此来代替每个物品都独自绘制, 这样可以减少每帧绘制操作的次数。
  
−
{{notice|有些很老的显卡不支持Canvas，如果你试图使用它们将抛出一个错误。在运行时使用 [[love.graphics.isSupported|love.graphics.isSupported("canvas")]] 来检查是否支持。}}
+
在 [[0.10.0]] 之前的版本中，并不是所有的显卡都能够支持 LÖVE 的 Canvases。[[love.graphics.isSupported|love.graphics.isSupported("canvas")]] 可以用来在运行时检查是否支持。
 +
 
 +
{{notice|往 Canvas(画布) 上绘制内容是会使用 regular alpha blengding（一种颜色混合的模型[[BlendMode]]）, 所要绘制的内容的 alpha(透明度，rgba中的a) 值会直接和自己的 RGB 值相乘。
 +
由于一旦 Canvas 要被绘制的时候，它的像素颜色都会被 ''premultiplied alpha(预乘混合值)''，所以要把 Canvas 绘制到屏幕上或者其他的 Canvas 时必须要用 premultiplied alpha blending (另外一种颜色混合模式，表示已经预乘过了)– [[love.graphics.setBlendMode]]("alpha", "premultiplied")。 }}
  
 
== 构造函数 ==
 
== 构造函数 ==
−
{{#ask: [[Category:Functions]] [[Constructs::Canvas]]
+
{{#ask: [[Category:Functions]] [[Constructs::Canvas (简体中文)]]
 
| headers=hide
 
| headers=hide
 
| default=None.
 
| default=None.
Line 21: Line 23:
 
}}
 
}}
 
== 函数 ==
 
== 函数 ==
−
{{#ask: [[Category:Functions]] [[parent::Canvas||Drawable||Object]] [[Concept:Current]]
+
{{#ask: [[Category:Functions]] [[parent::Canvas (简体中文)||Texture (简体中文)||Drawable (简体中文)||Object (简体中文)]] [[Concept:Current]]
 
| headers=hide
 
| headers=hide
 
| format=template
 
| format=template
Line 32: Line 34:
 
}}
 
}}
 
== 父类 ==
 
== 父类 ==
−
* [[parent::Texture]]
+
* [[parent::Texture (简体中文)]]
−
* [[parent::Drawable]]
+
* [[parent::Drawable (简体中文)]]
−
* [[parent::Object]]
+
* [[parent::Object (简体中文)]]
−
== 范例 ==
+
== 示例==
−
=== 绘制一些东西到Canvas上，然后覆盖在画面上。 ===
+
=== 在画布上绘制物品，并将画布绘制到屏幕 ===
 
<source lang="lua">
 
<source lang="lua">
 
function love.load()
 
function love.load()
−
canvas = love.graphics.newCanvas(800, 600)
+
    canvas = love.graphics.newCanvas(800, 600)
  
−
-- 在Canvas上用Alpha混合模式绘制一个矩形。
+
    -- 使用 regular alpha blend 颜色混合模式在画布上绘制一个矩形
−
love.graphics.setCanvas(canvas)
+
    love.graphics.setCanvas(canvas)
−
canvas:clear()
+
        love.graphics.clear()
−
love.graphics.setBlendMode('alpha')
+
        love.graphics.setBlendMode("alpha")
−
love.graphics.setColor(255, 0, 0, 128)
+
        love.graphics.setColor(255, 0, 0, 128)
−
love.graphics.rectangle('fill', 0, 0, 100, 100)
+
        love.graphics.rectangle('fill', 0, 0, 100, 100)
−
love.graphics.setCanvas()
+
    love.graphics.setCanvas()
 
end
 
end
  
 
function love.draw()
 
function love.draw()
−
love.graphics.setColor(255, 255, 255, 255)
+
    -- 非常重要！：在绘制 Canvas 时需要把颜色进行重置，这样 Canvas 才能正确地显示
−
+
    -- 可以看下这里的讨论: https://love2d.org/forums/viewtopic.php?f=4&p=211418#p211418
−
-- Canvas上的矩形已经使用alpha混合。
+
    love.graphics.setColor(255, 255, 255, 255)
−
-- 绘Canvas布本身时，以防止其他混合使用premultiplied混合模式。
+
 
−
love.graphics.setBlendMode('premultiplied')
+
    -- Canvas 中的矩形已经是混合模式
−
love.graphics.draw(canvas)
+
    -- 当绘制 Canvas 时需要使用 premultiplied（预乘） alpha blend 模式才能保证颜色正确的混合，如果不理解的话，就记住这个操作
−
-- 展示Canvas使用了alpha混合模式的差异。
+
    love.graphics.setBlendMode("alpha", "premultiplied")
−
love.graphics.setBlendMode('alpha')
+
    love.graphics.draw(canvas)
−
love.graphics.draw(canvas, 100, 0)
+
    -- 可以观察一下在普通的混合模式下两者的区别
 +
    love.graphics.setBlendMode("alpha")
 +
    love.graphics.draw(canvas, 100, 0)
  
−
-- 矩形直接画到与Alpha混合模式的画面。
+
    -- 一般的绘制物品，如矩形是直接使用 alpha blending 模式的
−
love.graphics.setBlendMode('alpha')
+
    love.graphics.setBlendMode("alpha")
−
love.graphics.setColor(255, 0, 0, 128)
+
    love.graphics.setColor(255, 0, 0, 128)
−
love.graphics.rectangle('fill', 200, 0, 100, 100)
+
    love.graphics.rectangle('fill', 200, 0, 100, 100)
 
end
 
end
 
</source>
 
</source>
  
−
== 参考 ==
+
== 参见 ==
−
* [[parent::love.graphics]]
+
* [[parent::love.graphics (简体中文)]]
−
* [[love.graphics.setCanvas]]
+
* [[love.graphics.setCanvas (简体中文)]]
−
* [[love.graphics.isSupported]]
+
* [[love.graphics.setBlendMode (简体中文)]]
 +
* [[love.graphics.isSupported (简体中文)]]
 
[[Category:Types]]
 
[[Category:Types]]
−
{{#set:Description=Off-screen render target.}}
+
{{#set:Description=离屏渲染目标物体。}}
 +
{{#set:Since=080}}
 +
{{#set:PrettySince=0.8.0}}
  
 
== 其他语言 ==
 
== 其他语言 ==
 
{{i18n|Canvas}}
 
{{i18n|Canvas}}

Latest revision as of 12:53, 31 March 2018

自 LÖVE 0.8.0 可以使用
从 Framebuffer 重命名而来.


Canvas(画布)用于离屏渲染（就是不真正地绘制，只是把数据存储起来）。可以把它看成是一种无形的屏幕，你可以在上面绘制一些东西，但直到你将它绘制到实际的屏幕，它都不会被看见。它也被称为“纹理渲染(render to texture)”。

在Canvas上绘制一些不经常改变（相对）位置的东西（如背景图案，蓝天，白云形成一个整体）,然后再把整个Canvas绘制出来。以此来代替每个物品都独自绘制, 这样可以减少每帧绘制操作的次数。

在 0.10.0 之前的版本中，并不是所有的显卡都能够支持 LÖVE 的 Canvases。love.graphics.isSupported("canvas") 可以用来在运行时检查是否支持。

O.png 往 Canvas(画布) 上绘制内容是会使用 regular alpha blengding（一种颜色混合的模型BlendMode）, 所要绘制的内容的 alpha(透明度，rgba中的a) 值会直接和自己的 RGB 值相乘。

由于一旦 Canvas 要被绘制的时候，它的像素颜色都会被 premultiplied alpha(预乘混合值)，所以要把 Canvas 绘制到屏幕上或者其他的 Canvas 时必须要用 premultiplied alpha blending (另外一种颜色混合模式，表示已经预乘过了)– love.graphics.setBlendMode("alpha", "premultiplied")。

 


构造函数

love.graphics.newCanvas (简体中文) 创建一个新的 Canvas（画布）。 Added since 0.8.0

函数

Object:release (简体中文) 立即摧毁对象在 Lua 中的引用 Added since 11.0

父类

示例

在画布上绘制物品，并将画布绘制到屏幕

function love.load()
    canvas = love.graphics.newCanvas(800, 600)

    -- 使用 regular alpha blend 颜色混合模式在画布上绘制一个矩形
    love.graphics.setCanvas(canvas)
        love.graphics.clear()
        love.graphics.setBlendMode("alpha")
        love.graphics.setColor(255, 0, 0, 128)
        love.graphics.rectangle('fill', 0, 0, 100, 100)
    love.graphics.setCanvas()
end

function love.draw()
    -- 非常重要！：在绘制 Canvas 时需要把颜色进行重置，这样 Canvas 才能正确地显示
    -- 可以看下这里的讨论: https://love2d.org/forums/viewtopic.php?f=4&p=211418#p211418
    love.graphics.setColor(255, 255, 255, 255)

    -- Canvas 中的矩形已经是混合模式
    -- 当绘制 Canvas 时需要使用 premultiplied（预乘） alpha blend 模式才能保证颜色正确的混合，如果不理解的话，就记住这个操作
    love.graphics.setBlendMode("alpha", "premultiplied")
    love.graphics.draw(canvas)
    -- 可以观察一下在普通的混合模式下两者的区别
    love.graphics.setBlendMode("alpha")
    love.graphics.draw(canvas, 100, 0)

    -- 一般的绘制物品，如矩形是直接使用 alpha blending 模式的
    love.graphics.setBlendMode("alpha")
    love.graphics.setColor(255, 0, 0, 128)
    love.graphics.rectangle('fill', 200, 0, 100, 100)
end

参见



其他语言

Dansk – Deutsch – English – Español – Français – Indonesia – Italiano – Lietuviškai – Magyar – Nederlands – Polski – Português – Română – Slovenský – Suomi – Svenska – Türkçe – Česky – Ελληνικά – Български – Русский – Српски – Українська – עברית – ไทย – 日本語 – 正體中文 – 简体中文 – Tiếng Việt – 한국어
More info

Retrieved from "https://love2d.org./w/index.php?title=Canvas_(简体中文)&oldid=21208"