如何解决使用Canvas在HTML5 Meter / ProgressBar标记上标记
|| 我想在HTML5 Meter上使用大小不同的图像/图标在各个点进行标记。现在,我可以通过将其放置在仪表的各个部分来使用span标签。 还有其他选择吗?我想知道是否可以使用canvas元素这样做。解决方法
使用canvas或WebGL肯定会更容易。
以Canvas为例,假设
images
是具有字段image
,x
和y
的对象的数组:
context.fillRect(0,100,10); // Progressbar background. Alternatively,you could stroke it (draw a border).
context.fillRect(0,10,10); // Draw the current progress. I\'ve hard coded it to 10% here.
for (var i = 0; i < images.length; i++)
{
var a = images[i]; // I\'m lazy
context.fillRect(a.x - 1,2,a.y); // less code than stroking
context.drawImage(a,a.x,a.y);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。