上一篇: html5 – 在登录/注销方案中以编... 下一篇:HTML5 Boilerplate如何将github ...

html5 – 可以一次在多个画布上画画吗？

HTML5 发布时间：2022-04-25 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了html5 – 可以一次在多个画布上画画吗？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_404_6@ 我的所有画布绘图函数都是这样的：

function drawMe(){

    var canvas = document.getElementById('canvas-id');

    var ctx = null;

    ctx = canvas.getContext('2d');

    ...
}

但是我现在想在(变量)数量的画布上绘制相同的图像,是否有一些替代getElementById()(也许在jQuery中？)可以用来轻松地一次抓取多个？

谢谢！

玩笑

解决方法

绘制到多个画布将是非常低效的,因为渲染是您可以执行的最昂贵的操作之一.

你想要做的是使用缓冲区.你可以简单地从一个画布画到另一个画布.

var canvas1 = document.getElementById("canvas1");
var canvas2 = document.getElementById("canvas2");

var ctx1 = canvas1.getContext("2d");
var ctx2 = canvas2.getContext("2d");

ctx1.fillStyle = "black";
ctx1.fillRect(10,10,10);

ctx2.drawImage(canvas1,0);

这是一个 fiddle.

记住,你只需要调用一次ctx.drawImage – 在你完成第一个画布上的所有绘图之后.