创建HTML5画布模式并用它们填充内容
Creating HTML5 canvas patterns and filling stuff with them
我在.createPattern(image,"repeat")
方面遇到困难。
- 我可以用
.toDataURL()
和.createPattern()
创建的自己的图案填充正方形吗 - 我可以用一个图案填充一个正方形吗?这个图案就是当前的画布
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.strokeRect(0.5, 0.5, 10, 10);
context.arc(5.5, 5.5, 3, 0, Math.PI);
context.rect(3, 3, 1, 1);
context.rect(7, 3, 1, 1);
context.stroke();
var img = new Image();
img.src = canvas.toDataURL();
context.drawImage(img, 10, 10); // works
context.beginPath();
var pattern = context.createPattern(img, "repeat"); // doesn't work
context.fillStyle = pattern;
context.fillRect(20, 20, 100, 100);
context.fill();
context.beginPath();
var pattern2 = context.createPattern(canvas, "repeat"); // doesn't work
context.fillStyle = pattern2;
context.fillRect(120, 20, 100, 100);
context.fill();
<canvas id="canvas" width="320" height="240" style="border: solid darkblue 1px;background-color: aliceblue"></canvas>
您需要为模式创建一个单独的画布,因为您无法自引用画布来与模式一起使用。
原因是,当你引用你试图绘制的原始画布时,图案将具有相同的大小,并且只绘制一个实例,因为没有更多的空间。
因此,为了使其发挥作用,您需要定义一个较小尺寸的图案,因此我们需要一个单独的画布或图像,并将其作为图案的源传入。
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
// create the off-screen canvas
var canvasPattern = document.createElement("canvas");
canvasPattern.width = 10;
canvasPattern.height = 10;
var contextPattern = canvasPattern.getContext("2d");
// draw pattern to off-screen context
contextPattern.beginPath();
contextPattern.strokeRect(0.5, 0.5, 10, 10);
contextPattern.arc(5.5, 5.5, 3, 0, Math.PI);
contextPattern.rect(3, 3, 1, 1);
contextPattern.rect(7, 3, 1, 1);
contextPattern.stroke();
// now pattern will work with canvas element
var pattern = context.createPattern(canvasPattern,"repeat");
context.fillStyle = pattern;
context.fillRect(20, 20, 100, 100);
context.fill();
<canvas id="canvas" width="320" height="240" style="border: solid darkblue 1px;background-color: aliceblue"></canvas>
相关文章:
- HTML5使用Javascript填充文本标记的有效方式
- html5具有特定alpha的画布填充文本和具有不同alpha的背景
- HTML5画布-如何填充()特定的上下文
- 缩放背景图案填充 html5 画布标记
- 如何将渐变的底部锚定到它在 HTML5 画布中填充的容器
- Javascript/HTML5使用图像填充画布
- 在 HTML5 中部分填充矩形
- HTML5 数据列表标签未在 Safari 中填充
- (HTML5 画布)填充样式 img 不会随我的地形路径移动
- 用于HTML5音频问题的javascript填充程序
- 画布 html5 中的透明度上下文.填充样式
- 使用从模型传递的数据填充 HTML5 日期选取器
- 如何获取HTML5画布元素的填充颜色
- HTML5地理位置地址表单填充器未捕获语法错误:意外的标记<
- HTML5画布填充Rect缓慢
- Html5音频获胜'当源代码通过JavaScript填充时,t在safari中播放
- html5画布填充文本随sketch.js一起消失
- 创建HTML5画布模式并用它们填充内容
- 用上传的XML文件填充HTML5输入字段
- 用远程JSON填充HTML5本地存储