canvas入门,基于canvas画布添加一张图片

在最近的一个web前端外包的开发项目中,就有这样一个类似车子的公里数的这样一个表盘,并且值要动态的上升,这可难倒我们做web前端的小伙伴了,要知道css制作一个能走动的圆环是非常复杂的,那么我们直接想到了canvas,这就好像之前给安以轩做h5请柬的时候,有一个描边的动画我们用到了svg,每个都有它特别的用处。

由于canvas第一次尝试,所以哪怕很简单的添加一张图片也倒腾了很久,所以做一下笔记:

var myImage=document.getElementByIdx_x("myCanvas");
 
var cxt=myImage.getContext("2d");
 
var img=new Image();
 
img.src="tu0.jpg";
 
cxt.drawImage(img,0,0,50,50,25,25,100,100);
 
cxt.drawImage(img,125,125,100,100,125,125,150,150);
 
cxt.drawImage(img,80,80,100,100,250,250,220,220);

还有更复杂的代码就不贴出来了,如果你刚好也有这方面web前端外包的需求,欢迎联系切图网旗下高性价比web前端外包服务品牌——切版。

 

切版- 切图网(qietu.com)旗下psd转html,前端外包的“切图客”团体。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

客服咨询
客服1
客服2
微信公众号