html5和js绘制图片到canvas的方法


本文摘自PHP中文网,作者不言,侵删。

这篇文章主要介绍了js+html5绘制图片到canvas的方法,涉及html5元素操作的相关技巧,需要的朋友可以参考下

本文实例讲述了js+html5绘制图片到canvas的方法。分享给大家供大家参考。具体实现方法如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="200" height="100"

style="border:1px solid #c3c3c3;">

Your browser does not support the HTML5 canvas tag.

</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

var img=new Image();

img.onload = function(){

ctx.drawImage(img,0,0);

};

img.src="img_flwr.png";

</script>

</body>

</html>

阅读剩余部分

相关阅读 >>

两分钟了解jquery与javascript、js 三者间的区别

html5 什么是prefetch/prerender?介绍html5 中prefetch/prerender

web 前后端怎么交互

字符编码是什么?html5如何设置字符编码?

网站对联广告js代码分享

如何实现图片懒加载?

html5中的postmessage api基本使用方法分享

浅谈html5的未来发展

自学 html5 要多久

一起看看ecmascript和javascript的区别

更多相关阅读请进入《js》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...