您是否知道帆布的一些最佳实践？

请在此主题中添加您所了解,已经学习或在线阅读任何和所有Canvas最佳实践,性能提示/技巧

随着Canvas仍然是互联网的新手,并且没有任何迹象表明我将来可以看到,它没有太多记录在案的"最佳实践"或其他非常重要的技巧,这些技巧对于开发来说是"必须知道的"它在任何一个特定的地方.像这样的事情散落在不太知名的地方,很多次.

人们需要了解的东西太多了,而且还要学到很多东西.

我想分享一些东西,以帮助那些正在学习Canvas的人,也许还有一些已经非常了解它的人,并希望从其他人那里获得一些关于他们认为最佳实践或其他使用HTML5中的Canvas的提示和技巧的反馈.

我想从一个我个人认为对开发人员来说非常有用但非常罕见的事情开始.

1.缩进代码

就像你在任何其他时间一样,无论情况如何,用任何其他语言.它是其他一切的最佳实践,我发现在复杂的画布应用程序中,在处理几个不同的上下文和保存/恢复状态时,事情会变得有些混乱.更不用说代码更具可读性和整体清晰度.

例如:

...
// Try to tell me this doesn't make sense to do
ctx.fillStyle = 'red';
ctx.fill();
ctx.save();
    if (thing < 3) {
        // indenting
        ctx.beginPath();
            ctx.arc(2, 6, 11, 0, Math.PI*2, true);
        ctx.closePath();
        ctx.beginPath();
            ctx.moveTo(20, 40);
            ctx.lineTo(10, 200);
            ctx.moveTo(20, 40);
            ctx.lineTo(100, 40);
        ctx.closePath();
        ctx.save();
            ctx.fillStyle = 'blue'
            ctx.fill();
        ctx.restore();
    } else { 
        // no indenting
        ctx.drawImage(img, 0, 0, 200, 200);
        ctx.save();
        ctx.shadowBlur();
        ctx.beginPath();
        ctx.arc(2, 60, 10, 0, Math.PI*2, false);
        ctx.closePath();
        ctx.fillStyle 'green'; …

我正在寻找一种仅使用css背景创建箭头的方法.

在我的情况下,这是一个选择下拉列表,因此不能使用select不支持的伪元素.

我知道如果不能使用背景,我可以使用canvas来实现这一点 - 使用<canvas>作为CSS背景