-
- 论斤烤 2020-12-05
代码示例：
-
截图0赞 · 0采集
-
- 论斤烤 2020-12-05
createPattern
-
截图0赞 · 0采集
-
- pinzaghi 2019-12-05
createPattern可以以另一个canvas作为填充
-
截图0赞 · 0采集
-
- pinzaghi 2019-12-05
createPattern用图片填充
-
截图0赞 · 0采集
-
- 慕瓜0079440 2019-10-02
-
截图0赞 · 0采集
-
- 慕码人8705899 2019-01-22
createPattern(video,repeat-style)
createPattern甚至还有嵌入video的能力
-
截图0赞 · 0采集
-
- 慕码人8705899 2019-01-22
createPattern(canvas.repeat-style);
createPattern的功能十分强大，可以引入其他的canvas；
-
截图0赞 · 0采集
-
- 慕码人8705899 2019-01-22
实际例子中，使用new Image() 创建一个图片对象，并且给src赋值提供路径
-
截图0赞 · 0采集
-
- 慕码人8705899 2019-01-22
createPattern(img,repeat-style); repeat-style:no-repeat repeat-x repeat-y repeat
-
截图0赞 · 0采集
-
- 23568 2018-10-11
全部代码，不谢
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>
<canvas id="canvas" width="1024" height="768" style="border:1px solid;"></canvas>
</body>
<script>
var canvas = document.getElementById('canvas');
canvas.width = 800;
canvas.height = 800;
var context = canvas.getContext('2d');
// createPattern(img, repeat-style);
// repeat-style: no-repeat/repeat-x/repeat-y/repeat
// var bgImg = new Image();
// bgImg.src = 'https://img1.mukewang.com/5333a1bc00014e8302000200-140-140.jpg';
// bgImg.onload = function () {
// var pattern = context.createPattern(bgImg, 'repeat');
// context.fillStyle = pattern;
// context.fillRect(0, 0, 800, 800);
// }
var bgCanvas = createBackgroundCanvas();
var pattern = context.createPattern(bgCanvas, 'repeat');
context.fillStyle = pattern;
context.fillRect(0, 0, 800, 800);
function createBackgroundCanvas() {
var canvas = document.createElement('canvas');
canvas.width = 100;
canvas.height = 100;
var context = canvas.getContext('2d');
drawStar(context, 50, 50, 50, 0); // 之前的课程中写的的
return canvas;
}
function drawStar(ctx, x, y, R, rot) {
ctx.save();
ctx.translate(x, y);
ctx.rotate(rot/180*Math.PI);
ctx.scale(R, R);
starPath(ctx);
ctx.fillStyle = '#fb3';
ctx.fill();
ctx.restore();
}
function starPath(ctx) {
ctx.beginPath();
for (var i = 0; i < 5; i++) {
ctx.lineTo(Math.cos((18+i*72)/180*Math.PI),
-Math.sin((18+i*72)/180*Math.PI));
ctx.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5,
-Math.sin((54+i*72)/180*Math.PI)*0.5);
}
ctx.closePath();
}
</script>
</html>
- 1赞 · 1采集
-
- 左小珍 2018-01-24
- Canvas绘图详解 5-3 使用图片 画布或者video createPatttern（img , repeat-style） createPatttern（canvas , repeat-style） createPatttern（video , repeat-style）
- 0赞 · 0采集
-
- qq_展wing飛_0 2017-12-19
- createPattern
-
截图0赞 · 0采集
-
- qq_简单点_14 2017-09-15
- 使用图片、video、画布 作为填充背景 createPattern(img/video/canvas,'repeat-style') repeat-style:no-repeat; repeat-x/repeat-y repeat
- 0赞 · 0采集
-
- 小丫小峰子 2017-08-10
- 使用图片作为填充背景
-
截图0赞 · 0采集
-
- 雲_音 2017-04-10
- 使用图片，进行背景填充
-
截图1赞 · 1采集
-
- hansenwangvip 2016-11-03
- createPattern(img , repeat-style )
- 0赞 · 0采集
-
- 遵从我心 2016-09-30
- createPattern
-
截图0赞 · 0采集
-
- 路在眼前 2016-09-06
- 使用图片
-
截图0赞 · 0采集
-
- opposite 2016-07-27
- 自己创建的纹理背景createPattern(canvas,repeat-style)
- 0赞 · 0采集
-
- 苏菲刀客 2016-07-06
- 图片填充： createPattern( img, repeat-style ); 画布填充： createPattern( canvas, repeat-style ); 视频背景填充： createPattern( vedio, repeat-style );
- 0赞 · 1采集
-
- 228125 2016-06-21
- var pattern = context.createPattern(img/canvas/video, repeat-style);
- 0赞 · 0采集
-
- 张小屋_ 2016-06-19
- var pattern = context.createPattern(img/canvas/video, repeat-style);<br> repeat-style: <br> no-repeat 不重复<br> repeat-x X轴方向重复<br> repeat-y Y轴方向重复<br> repeat X，Y轴方向都重复
- 0赞 · 1采集
-
- Lywwwwwvvv 2016-05-25
- createPattern 可以调用另外一个画布 来填充
-
截图0赞 · 0采集
-
- lemonda 2016-05-11
- 使用图片的详例
-
截图0赞 · 0采集
-
- lemonda 2016-05-11
- canvas使用图片
-
截图0赞 · 0采集
-
- 蛋疼少年的和谐青春 2016-04-12
- createPattern
-
截图0赞 · 0采集
-
- HeyShinner 2016-04-07
- 利用画布
-
截图0赞 · 0采集
-
- HeyShinner 2016-04-07
- 使用图片
-
截图0赞 · 0采集
-
- 思思_0003 2016-03-23
- 纹理绘制案例
-
截图0赞 · 0采集
-
- 思思_0003 2016-03-23
- 绘制纹理
-
截图0赞 · 0采集
