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前端外包服务品牌——切版。

 

免费索取报价