实例讲解利用HTML5CanvasAPI操作图形旋转的方法_从0到1html5canvas动画开发资源-CSDN文库

100 浏览量 2020-12-14 02:04:12 上传评论收藏 152KB PDF 举报

资源推荐

资源详情

资源评论

实例讲解利用实例讲解利用HTML5 Canvas API操作图形旋转的方法操作图形旋转的方法

作为web开发者，我一直在和HTML5 canvas元素打交道。渲染图片是一个大的分支，十分重要而且很常用，所以,今天的教程

是关于画布图像展示以及如何旋转图像，说不定是你现在真正想要的好东西。

总的来说，canvas旋转有两种方式：中心旋转和参照点旋转。熟练应用旋转功能，对你的开发作品会有极大的帮助。

关于对象的中心旋转关于对象的中心旋转

第一个类型的旋转，我们要看看是对其中心旋转一个对象。实现使用画布元素，这是一个最简单的旋转类型。我们把一只大猩

猩的图片作为素材进行试验。

基本的想法是,我们要把帆布按照一个中心点旋转,旋转画布,然后把画布回到原来的位置。如果你有一些经验关于图形引擎，那

么这听起来应该很熟悉。代码大概就是这样：（点击看效果）

JavaScript Code复制内容到剪贴板

function onload() {

var canvas = document.getElementById(‘c1’);

var ctx1 = canvas.getContext(‘2d’);

var image1 = new Image();

image1.onload = function() {

// regular rotation about center

var xpos = canvas.width/2;

var ypos = canvas.height/2;

ctx1.drawImage(image1, xpos – image1.width / 2, ypos – image1.height / 2);

ctx1.save();

ctx1.translate(xpos, ypos);

ctx1.rotate(47 * Math.PI / 180);//旋转47度

ctx1.translate(-xpos, -ypos);

ctx1.drawImage(image1, xpos – image1.width / 2, ypos – image1.height / 2);

ctx1.restore();

}

image1.src = ‘image.png’;

}

注释已经非常详细，但我仍旧想提一点：.save()和.restore()。他们的作用是保存旋转之前的画布，然后旋转后恢复。有效地

避免了和其他渲染冲突，十分关键，许多朋友没有顺利进行旋转，大多都是这个原因。

围绕某个点旋转围绕某个点旋转

第二个类型是图像围绕空间的某个点进行旋转，这将变得比较复杂。可为什么要这样做呢？很多情况下，你需要把对象参照另

一个对象旋转，单一的围绕中心旋转无法满足需求。而且后者会更常用，比如在做网页游戏中，经常会用到旋转。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

内容反馈

weixin_38664469

粉丝: 5
资源: 897

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip