HTML5快速入门实例（五）Cnavas元素-平移旋转

最新推荐文章于 2022-08-09 16:50:01 发布

GPU小码农

最新推荐文章于 2022-08-09 16:50:01 发布

阅读量1.5k

点赞数

分类专栏： HTML5 文章标签： html5 html html5游戏开发 utf-8

本文链接：https://blog.csdn.net/zjc_game_coder/article/details/44650499

版权

HTML5 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!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="qie.PNG" id="img">
<script type="text/javascript" charset="utf-8">
    //获取canvas对象的引用
    var canvas = document.getElementById('canvas');
    //获取canvas的2d绘图环境
    var context = canvas.getContext('2d');
    //获得图片对象的引用
    var image = document.getElementById('img');
    //平移物体至原点位置
    context.translate(300,200);
    //以新原点为中心旋转60°
    context.rotate(Math.PI / 3);
    context.drawImage(image,0,0,87,86);
    //通过反向旋转和平移恢复原点状态
    context.rotate(-Math.PI /3);
    context.translate(100,200);
</script>
</body>
</html>

运行效果：

GPU小码农

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5快速入门实例（五）Cnavas元素-平移旋转

Html5游戏开发学习1-Canvas 浏览器不支持HTML5 canvas //获取canvas对象的引用 var canvas = document.getElementById('canvas'); //获取canvas的2d绘图环境 var context = canvas.getContext('2d'); //获得图片对象的引
复制链接

扫一扫