HTML5快速入门实例(四)Cnavas元素-绘制图像
来源:互联网 发布:空姐圈子乱 知乎 编辑:程序博客网 时间:2024/06/16 05:33
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>Html5游戏开发学习1-Canvas</title></head><body><canvas id="canvas" width="600" height="600" style="broder:black 1px solid;"> 浏览器不支持HTML5 canvas</canvas><img src="b.jpg" id="img"><!--注意是这里,通过标签加入图片,src是图片路径--><script type="text/javascript" charset="utf-8"> //使用drawImage()方法绘制图像 //获取canvas对象的引用 var canvas = document.getElementById('canvas'); //获取canvas的2d绘图环境 var context = canvas.getContext('2d'); //获得图片对象的引用 var image = document.getElementById('img'); //在(0,350)处绘制图片 context.drawImage(image,0,350); //缩小至原来的一半 context.drawImage(image,0,400,100,25); //绘制图像的局部 context.drawImage(image,0,0,60,50,0,420,60,50);</script></body></html>
效果:
0 0
- HTML5快速入门实例(四)Cnavas元素-绘制图像
- HTML5快速入门实例(五)Cnavas元素-平移旋转
- HTML5快速入门实例(一)Canvas绘制图形
- HTML5快速入门实例(二)使用Canvas绘制文本
- HTML5快速入门实例(六)audio元素静态加载和动态加载实例
- 用cnavas绘制五角星
- HTML5快速入门(四)—— JavaScript
- 【HTML5初探之绘制图像(上)】看我canvas元素引领下一代web页面
- 【HTML5初探之绘制图像(下)】看我canvas元素引领下一代web页面
- HTML5快速入门实例(三)Canvas自定义画笔样式
- HTML5 Canvas 绘制图像
- html5绘制图像
- html5使用图像-绘制图像
- HTML5绘制饼图实例(-)
- html5中图像元素
- html5 canvsast元素绘制直线
- html5 canvas元素字体绘制
- HTML5 Canvas元素绘制图形
- 设计模式之工厂方法模式
- symbolicatecrash使用
- Android 动画详解之Tween动画
- 三层框架(EF+MVC)项目实战之 系列一 EF零基础创建领域模型
- Oracle密码过期the password has expired
- HTML5快速入门实例(四)Cnavas元素-绘制图像
- 思维导图:HTML5 viewport整理
- getline()
- svn merge
- 欢迎使用CSDN-markdown编辑器
- 生活是最好的老师
- [iOS]使用symbolicatecrash分析crash文件
- 在ListFragment中添加自定义List列表
- scheme 中 list 和 vector 的访问速度