个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我之前问过如何使用 html5 canvas 用棋盘格效果填充形状。 HTML5 Canvas Fill with two colours
我得到了一个 jsfiddle 来展示如何做到这一点。 http://jsfiddle.net/NdUcv/2/
var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');
// set up a pattern, something really elaborate!
var pattern = document.createElement('canvas');
pattern.width = 40;
pattern.height = 40;
var pctx = pattern.getContext('2d');
pctx.fillStyle = "rgb(188, 222, 178)";
pctx.fillRect(0,0,20,20);
pctx.fillRect(20,20,20,20);
// Now we draw that pattern to a custom shape:
var pattern = ctx.createPattern(pattern, "repeat");
ctx.beginPath();
ctx.moveTo(30, 30);
ctx.lineTo(300, 30);
ctx.lineTo(400, 60);
ctx.lineTo(300, 150);
ctx.lineTo(200, 50);
ctx.lineTo(100, 450);
//ctx.closePath();
ctx.fillStyle = pattern;
ctx.fill();
我想知道如何将此语法转换为 KineticJS？我从kineticjs文档和示例中注意到，您可以填充图像或渐变，但没有提到填充图案。
如果可以用 html5 原生完成的话，这当然可以完成吗？
最佳答案
是的，您可以使用类似的代码来创建充满您的图案的动态多边形
用您的图案填充 Canvas ，就像在 native html Canvas 中一样:
// use a temp canvas to create a pattern
var pattern = document.createElement('canvas');
pattern.width = 40;
pattern.height = 40;
var pctx = pattern.getContext('2d');
pctx.fillStyle = "rgb(188, 222, 178)";
pctx.fillRect(0,0,20,20);
pctx.fillRect(20,20,20,20);
现在使用临时 Canvas 创建图像对象
var img=new Image();
img.onload=function(){
// img now contains your pattern
}
img.src=pattern.toDataURL();
最后，使用 fillPatternImage 用您的图案填充动态多边形:
// make a kinetic polygon filled with the pattern
var polyPattern = new Kinetic.Polygon({
points: [30,30, 300,30, 400,60, 300,150, 200,50, 100,450],
fillPatternImage: img,
stroke: 'black',
strokeWidth: 3
});
这是代码和 fiddle :http://jsfiddle.net/m1erickson/uW8xz/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.0.min.js"></script>
<style>
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:400px;
height:400px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 450,
height: 450
});
var layer = new Kinetic.Layer();
stage.add(layer);
// use a temp canvas to create a pattern
var pattern = document.createElement('canvas');
pattern.width = 40;
pattern.height = 40;
var pctx = pattern.getContext('2d');
pctx.fillStyle = "rgb(188, 222, 178)";
pctx.fillRect(0,0,20,20);
pctx.fillRect(20,20,20,20);
// make an image from the temp canvas pattern
var img=new Image();
img.onload=function(){
// make a kinetic polygon filled with the pattern
var polyPattern = new Kinetic.Polygon({
points: [30,30, 300,30, 400,60, 300,150, 200,50, 100,450],
fillPatternImage: img,
stroke: 'black',
strokeWidth: 3
});
// add the shape to the layer and layer.draw()
layer.add(polyPattern);
layer.draw();
}
img.src=pattern.toDataURL();
}); // end $(function(){});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
关于javascript - KineticJS 填充图案，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19163143/
24
4
0
我正在使用自定义的 uitableviewcell，并尝试重新创建一张活页纸作为背景。由于每个单元格都会根据文本量而增长，因此我需要为每个单元格的背景使用一个图案。但我对这些黑线有疑问，这让我发疯!
我已经解决这个问题 2 个小时了，似乎无法弄清楚如何按模式计数。 图案: 1-1-1 1-1-2 1-2-1 1-2-2 2-1-1 2-1-2 2-2-1 2-2-2 等等…… 最佳答案 我认为最简
我想尝试创建一个学习象棋应用程序作为学校项目。我的第一个计划是简单地让这个人工智能与自己进行较量，但要真正展示它是否成功，它需要能够展示它的进展情况。为了做到这一点，我希望它能够在 chess.com
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。 这个问题似乎偏离主题，因为它缺乏足够的信息来诊断问题。 更详细地描述您的问题或 include a mini
以下函数返回什么？ (就意义而言) int f(int n){ if(n == 0) return 0; else return n % 2 + f(n / 2) } 尝试运行代码，但
我有一个专栏A3:A71我希望填充值 =COUNTIF(B3:B71,B3) 第二个参数随每个单元格递增。 显然我不想每次都复制这个函数，所以我希望填充句柄能帮助我。然而，尽管它正确地增加了 COUN
我需要重复 svg 在水平方向 . 我的意思是，svg 比图案大，所以我需要它在剩下的任何空间上水平重复。 我希望主要图案出现在中心，这正是现在正在发生的事情。我只需要让它在两边都重复。 现在，我只
我需要重复 svg 在水平方向 . 我的意思是，svg 比图案大，所以我需要它在剩下的任何空间上水平重复。 我希望主要图案出现在中心，这正是现在正在发生的事情。我只需要让它在两边都重复。 现在，我只
请帮我完成作业。我想使用循环 C 语言生成这样的模式 X X X XXX XXXXX XXX X X X XXXXX X X X X X X XXXXX X XX X X X X X
c# 3.0 为我们提供了带有编译器生成的支持字段的 getter 和 setter - 这真的很棒，但很多时候您仍然需要使用支持字段。 在一个完美的世界(意见)中，你可以做类似的事情 class M
我正在创建一个 wordpress 主题，我正在尝试创建一个导航栏，其中每个 li 都有不同的背景颜色(例如，红色，然后是绿色，然后是蓝色)。然后在使用前三种颜色后，它会再次重复使用。 例如:
是否可以将 .svg 图案作为背景图像，svg 图案应调整为窗口宽度和高度。 最佳答案 这是可能的，但浏览器支持有限。 Webkit 往往具有最好的 SVG 支持，而 IE 最差。您可以使用 CSS
如何打印反Z图案？ 普通 Z 模式的代码: int main() { int n; printf("Enter number of rows: "); scanf("%d", &n); for (in
我的图片中有重复的图案。我想根据相似的模式找到相似的图像。 图案由十字形、三角形、正方形组成，它们组合在一起形成由这些“原始形状”构成的更复杂的结构。例如，想象一个由三角形或六边形等组成的十字架。 这
是否可以在 SVG 填充中模拟以下 CSS？ background-image: url(/* URL */); background-position: 50%; background-size:
这个问题在这里已经有了答案: How to make SVG image pattern fill move with object? (4 个答案) 关闭 1 年前。 我创建了这里看到的 svg
问题:存在关联键的表列表。有必要为每个表实现 CRUD + 一些关于表细节的功能(分页等)。麻烦:在每个表的每个功能实现中重复了大约 50% 的代码。问题:关于语言细节、优化/重构/使用类似代码模式的
尝试绘制在 x 轴上重复的背景。然而，图像放错了位置，当我调整窗口大小时，位于图案中的 View 将开始“移动”。 我做错了什么？目前正在做以下工作: [[NSColor colorWithPatte
Javascript 问题。 关于模式或表达，可能是重复的问题。 您可以使用下面的三个来获得一个对象。结果对象的工作原理相同。 当您使用繁重的 JavaScript Web 应用程序时，哪种模式最好？
是否可以使用 CSS 创建以下效果。我在 HTML 中只有一个 H2 元素，我对页面的 HTML 没有任何控制。我只能更改 CSS。 我用 :before 和 :after 尝试过，但到目前为止没有成
我是一名优秀的程序员,十分优秀！