<em>
konva
</em>
</title>
<style>
body {
margin: 0;
简介：
<em>
Konva
</em>
是一个基于
<em>
Canvas
</em>
开发的2d
<em>
js
</em>
框架库, 它可以轻松的实现桌面应用和移动应用中的图形交互。
官网：https://
<em>
konvajs
</em>
.org/api/
<em>
Konva
</em>
.html（详情查看）
<em>
konva
</em>
概念：
1.画布 stage
letstage =new
<em>
Konva
</em>
.Stage({container:"box",width:600,height:60...
该系列的入门教程教您如何使用
<em>
Konva
</em>
<em>
绘制
</em>
第一个形状。 它还说明了层和组在
<em>
Konva
</em>
中如何工作。 在本系列的其余部分中，我们将专注于更具体的主题，例如创建基本和复杂的形状或将事件侦听器附加到不同的形状，以使图形具有交互性。
本教程将向您展示如何在
<em>
Konva
</em>
中创建基本形状，例如矩形，圆形和椭圆形。 您还将了解可用于根据需要自定义所有这些形状的外观的不同属性。 本教程后面的部分将讨论如何使用K...
<em>
Vue
</em>
-
<em>
Konva
</em>
实现实时画板
<em>
Konva
</em>
是什么？
说
<em>
Konva
</em>
之前不得不说html5的一个新增标签： <
<em>
Canvas
</em>
>，其中文翻译为帆布、画布，我们可以利用javas在上面
<em>
绘制
</em>
各种图像、动画等，在html5之前，绘画只能借助flash动画实现，因此界面不得不使用JavaScript来和flash进行交互。而利用
<em>
canvas
</em>
可以直接使用JavaScript完成
<em>
绘制
</em>
。
而
<em>
Konva
</em>
是一个HTML5
<em>
Canvas
</em>
JavaScript框架，
<em>
Konva
</em>
提供了高性能的动画，补间，节点嵌套，布局
视频教程：【
<em>
Konva
</em>
入门教程】1、
<em>
Konva
</em>
介绍
<em>
Konva
</em>
是什么?
<em>
Konva
</em>
是一个HTML5
<em>
Canvas
</em>
JavaScript 框架，它通过对 2d context 的扩展实现了在桌面端和移动端的可交互性。
<em>
Konva
</em>
提供了高性能的动画，补间，节点嵌套，布局，滤镜，缓存，事件绑定（桌面/移动端）等等功能。你可以使用
<em>
Konva
</em>
在舞台上
<em>
绘制
</em>
图形，给图形添加事件，移动、缩放和旋转图形并且支持高性能的动画即使包含数千个图形。
一个简单的
<em>
绘制
</em>
矩形例子：
<!DOCTYPE html>
很长一段时间以来，所有流行的浏览器都支持HTML5画布。 您可以使用它在JavaScript的帮助下在浏览器中
<em>
绘制
</em>
图形。 可以在画布上创建的图形范围从简单的
<em>
线
</em>
条和形状到照片构图和动画。
在本系列中，您将学习一个非常有用的画布库，名为
<em>
Konva
</em>
。 您可以使用
<em>
Konva
</em>
在画布或舞台上
<em>
绘制
</em>
不同的形状。 除其他功能外，该库还允许您缩放，旋转和设置所有这些形状的动画，并将事件侦听器附加到它们。
在本系列的第二篇教程中，您学习了如何使用
<em>
Konva
</em>
<em>
绘制
</em>
一些基本形状，例如矩形，圆形和正多边形。 第三个教程介绍了如何使用
<em>
Konva
</em>
在画布上
<em>
绘制
</em>
一些更复杂的形状，例如星形和环形以及精灵。
在本教程中，我们将更进一步，学习如何通过更改形状的填充和笔触值将不同的样式应用于形状。 您还将学习如何控制形状的不透明度并对其应用阴影。 在最后几节中，您将学习如何使用混合模式来指定不同形状重叠时最终结果的...
如果您从一开始就遵循此系列，那么您现在应该对形状，组和图层非常满意。 您还应该能够使用
<em>
Konva
</em>
在画布上轻松
<em>
绘制
</em>
一些基本和复杂的形状 。 如果计划使用
<em>
Konva
</em>
创建一些交互式应用程序或游戏，那么下一步将是学习如何将事件绑定到舞台上的不同形状。
在本教程中，您将学习如何使用
<em>
Konva
</em>
将事件绑定到任何形状。 您还将了解事件委托和传播。 有时，您可能需要以编程方式控制形状的击中区域以及火灾事件。...
<div class="sep10"></div>
</div>
</div>
</div>
<div class="topic_buttons">
<div class="fr gray f11"
style="line-height: 12px; padding-top: 3px; text-shadow: 0px 1px 0px #fff;">
</div>
</div>
</div>
<div class="sep5"></div>
<div class="box">
<div class="cell">
<span class="gray">推荐文章</span>
</div>
<div class="cell">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td width="32" valign="top" align="center">
<a href="http://code.python88.com/u/Yvsi0DW920" ><img
src="http://img.python88.com/avatars/avatars/user-default.jpg?imageView2/2/w/100&imageView2/2/w/100"
class="avatar" style="max-width: 32px; max-height: 32px;"
border="0" align="default"></a>
</td>
<td width="10" valign="top"></td>
<td width="auto" valign="top" align="left">
<span class="item_hot_topic_title">
<a href="http://code.python88.com/u/Yvsi0DW920">逼格高的自行车</a>
·
<a target="_blank" href="http://code.python88.com/l/Vxw2FpeX5d">安全地与pathos.multiprocessing并行写入文件开发者社区</a>
</span>
<div class="sep5"></div>
<span class="fade">4 月前</span>
<small class="gray">
</small>
</td>
</tr>
</tbody>
</table>
</div>
<div class="cell">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td width="32" valign="top" align="center">
<a href="http://code.python88.com/u/WDoGHR71hn" ><img
src="http://img.python88.com/avatars/avatars/user-default.jpg?imageView2/2/w/100&imageView2/2/w/100"
class="avatar" style="max-width: 32px; max-height: 32px;"
border="0" align="default"></a>
</td>
<td width="10" valign="top"></td>
<td width="auto" valign="top" align="left">
<span class="item_hot_topic_title">
<a href="http://code.python88.com/u/WDoGHR71hn">爱听歌的草稿本</a>
·
<a target="_blank" href="http://code.python88.com/l/qg2DKPxxVu">Oracle GraalVM Enterprise Edition | Oracle 日本</a>
</span>
<div class="sep5"></div>
<span class="fade">2 周前</span>
<small class="gray">
</small>
</td>
</tr>
</tbody>
</table>
</div>
<div class="cell">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td width="32" valign="top" align="center">
<a href="http://code.python88.com/u/nX0PxuiOhd" ><img
src="http://img.python88.com/avatars/avatars/user-default.jpg?imageView2/2/w/100&imageView2/2/w/100"
class="avatar" style="max-width: 32px; max-height: 32px;"
border="0" align="default"></a>
</td>
<td width="10" valign="top"></td>
<td width="auto" valign="top" align="left">
<span class="item_hot_topic_title">
<a href="http://code.python88.com/u/nX0PxuiOhd">憨厚的可乐</a>
·
<a target="_blank" href="http://code.python88.com/l/fM16ZcIUae">BEA WORKSHOP 中的 AJAX 编程</a>
</span>
<div class="sep5"></div>
<span class="fade">2 天前</span>
<small class="gray">
</small>
</td>
</tr>
</tbody>
</table>
</div>
<div class="cell">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td width="32" valign="top" align="center">
<a href="http://code.python88.com/u/63QGUGPH3M" ><img
src="http://img.python88.com/avatars/avatars/user-default.jpg?imageView2/2/w/100&imageView2/2/w/100"
class="avatar" style="max-width: 32px; max-height: 32px;"
border="0" align="default"></a>
</td>
<td width="10" valign="top"></td>
<td width="auto" valign="top" align="left">
<span class="item_hot_topic_title">
<a href="http://code.python88.com/u/63QGUGPH3M">奔放的针织衫</a>
·
<a target="_blank" href="http://code.python88.com/l/ruz9aaSBuW">WPF：解决 调用线程无法访问此对象，因为另一个线程拥有该对象问题 - 槑孒 - 博客园</a>
</span>
<div class="sep5"></div>
<span class="fade">1 年前</span>
<small class="gray">
</small>
</td>
</tr>
</tbody>
</table>
</div>
<div class="cell">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td width="32" valign="top" align="center">
<a href="http://code.python88.com/u/uilAFcmL8j" ><img
src="http://img.python88.com/avatars/avatars/user-default.jpg?imageView2/2/w/100&imageView2/2/w/100"
class="avatar" style="max-width: 32px; max-height: 32px;"
border="0" align="default"></a>
</td>
<td width="10" valign="top"></td>
<td width="auto" valign="top" align="left">
<span class="item_hot_topic_title">
<a href="http://code.python88.com/u/uilAFcmL8j">安静的包子</a>
·
<a target="_blank" href="http://code.python88.com/l/Sdw5rdxqEe">C语言取字符串第N个字符后的部分_c语言 字符串第n位之后-CSDN博客</a>
</span>
<div class="sep5"></div>
<span class="fade">2 年前</span>
<small class="gray">
</small>
</td>
</tr>
</tbody>
</table>
</div>
<div class="cell">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td width="32" valign="top" align="center">
<a href="http://code.python88.com/u/izYJOlE5w0" ><img
src="http://img.python88.com/avatars/avatars/user-default.jpg?imageView2/2/w/100&imageView2/2/w/100"
class="avatar" style="max-width: 32px; max-height: 32px;"
border="0" align="default"></a>
</td>
<td width="10" valign="top"></td>
<td width="auto" valign="top" align="left">
<span class="item_hot_topic_title">
<a href="http://code.python88.com/u/izYJOlE5w0">发呆的花生</a>
·
<a target="_blank" href="http://code.python88.com/l/XIEqxyVYkd">YAML schema reference | Microsoft Learn</a>
</span>
<div class="sep5"></div>
<span class="fade">2 年前</span>
<small class="gray">
</small>
</td>
</tr>
</tbody>
</table>
</div>
<div class="cell">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td width="32" valign="top" align="center">
<a href="http://code.python88.com/u/P4SFKtlHiN" ><img
src="http://img.python88.com/avatars/avatars/user-default.jpg?imageView2/2/w/100&imageView2/2/w/100"
class="avatar" style="max-width: 32px; max-height: 32px;"
border="0" align="default"></a>
</td>
<td width="10" valign="top"></td>
<td width="auto" valign="top" align="left">
<span class="item_hot_topic_title">
<a href="http://code.python88.com/u/P4SFKtlHiN">痴情的跑步机</a>
·
<a target="_blank" href="http://code.python88.com/l/Jze1mhkvFX">Python---截取图片指定部分_python截取图片的一部分_一个叫欧维的程序员在此写博客的博客-CSDN博客</a>
</span>
<div class="sep5"></div>
<span class="fade">2 年前</span>
<small class="gray">
</small>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="sep5"></div>
<div class="box">
<div class="cell">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 普通广告（正在使用） -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1837452791782084"
data-ad-slot="6787195013"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<div class="sep5"></div>
</div>
</div>
<div class="c"></div>
<div class="sep20"></div>
</div>
<div id="Bottom">
<div class="content footer">
<div class="inner">
<div class="sep10"></div>
<div class="fr">
</div>
<strong>
<a href="http://www.jintiankansha.me/" class="dark" target="_blank">今天看啥</a>
<span class="snow">·</span>
<a href="http://www.python88.com/" class="dark" target="_blank">Py中国</a>
<span class="snow">·</span>
<a href="http://www.codingpro.cn/" class="dark" target="_blank">codingpro</a>
<span class="snow">·</span>
<a href="http://baike.linkmax.top" class="dark" target="_blank">小百科</a>
<span class="snow">·</span>
<a href="http://www.linkmax.top" class="dark" target="_blank">link之家</a>
<span class="snow">·</span>
<a href="http://www.wolongai.cn" class="dark" target="_blank">卧龙AI搜索</a>
</strong>
<div class="sep10"></div>
删除内容请联系邮箱 2879853325@qq.com
<div class="sep10"></div>
Code - 代码工具平台
<div class="sep10"></div>
<span class="f12 gray">© 2024 ~
<a href="http://beian.miit.gov.cn/" target="_blank"
rel="nofollow">沪ICP备11025650号</a></span>
<div class="sep10"></div>
</div>
</div>
</div>
<script type="text/javascript" src="https://img.100weidu.com/cdn/highlight.js/9.2.0/highlight.min.js"></script>
<script type="text/javascript" src="https://img.100weidu.com/cdn/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://img.100weidu.com/cdn/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="/static/js/site/base/common.js?v=97646d06e4a04b2bf43b7b467cfd321e"></script>
<script type="text/javascript" src="/static/js/site/base/v2ex.js?v=d41d8cd98f00b204e9800998ecf8427e"></script>
<script type="text/javascript" src="/static/js/site/base/base.js?v=4734e41dc8139093c113d6a48489a0f4"></script>
<script>
var _hmt = _hmt || [];
(function () {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?94b9935d8881b2e37490d19acfb0f6e4";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-P95KGR6D7D"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-P95KGR6D7D');
</script>
<script>
(function () {
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
} else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
<!-- 多条广告如下脚本只需引入一次 -->
<script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer">
</script>
<script type="text/javascript" src="/static/js/site/post/post_common.js?v=8d0f2fe55813416f744bc961e1768685"></script>
</body>
</html> 
