切版网（2013~2023）

http://qieban.cn
做完设计，找切版网
QQ:6135833
微信：dingxiangming82

2017年09月28日

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

本文就“canvas入门，基于canvas画布添加一张图片”展开讨论，作者切版网，发布于2017年09月28日 全文共568个字，预计阅读时长1分53秒。

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

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

[codesyntax lang=”javascript”]

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);

[/codesyntax]

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

文章为原创或者来自于互联网，转载请注明来源，如果文章有侵权请联系，我们会及时删除。