html5自动旋转图片,HTML5画布旋转图片

你可以使用canvas’context.translate& context.rotate来旋转你的图像

这里有一个函数来绘制旋转了指定度数的图像：

function drawRotated(degrees){

context.clearRect(0,0,canvas.width,canvas.height);

// save the unrotated context of the canvas so we can restore it later

// the alternative is to untranslate & unrotate after drawing

context.save();

// move to the center of the canvas

context.translate(canvas.width/2,canvas.height/2);

// rotate the canvas to the specified degrees

context.rotate(degrees*Math.PI/180);

// draw the image

// since the context is rotated, the image will be rotated also

context.drawImage(image,-image.width/2,-image.width/2);

// we’re done with the rotating so restore the unrotated context

context.restore();

}

body{ background-color: ivory; }

canvas{border:1px solid red;}

$(function(){

var canvas=document.getElementById("canvas");

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

var angleInDegrees=0;

var image=document.createElement("img");

image.οnlοad=function(){

ctx.drawImage(image,canvas.width/2-image.width/2,canvas.height/2-image.width/2);

}

image.src="houseicon.png";

$("#clockwise").click(function(){

angleInDegrees+=30;

drawRotated(angleInDegrees);

});

$("#counterclockwise").click(function(){

angleInDegrees-=30;

drawRotated(angleInDegrees);

});

function drawRotated(degrees){

ctx.clearRect(0,0,canvas.width,canvas.height);

ctx.save();

ctx.translate(canvas.width/2,canvas.height/2);

ctx.rotate(degrees*Math.PI/180);

ctx.drawImage(image,-image.width/2,-image.width/2);

ctx.restore();

}

}); // end $(function(){});

Rotate right

Rotate left

html5自动旋转图片,HTML5画布旋转图片相关推荐

html5 自动扣图,html5利用canvas实现颜色容差抠图功能
利用canvas的getImageData,我们可以获取到一张图片每一个像素的信息,而通过对每一个像素信息的对比,我们就可以找到需要消去的像素点.比如下面这一张图片,如果我们想要扣去白色部分(粉色是b ...
HTML5自动生成相框,HTML5拖放API实现自动生成相框功能
实现功能: 将桌面图片拖入指定地方,生成相框和相关信息. 相框需要自己配置,设置为背景,在CSS中设置. 效果如图: html部分: H5拖放API之图片相框效果 > 请将图片拖放至此处 CSS ...
html5自动添加数据库,HTML5本地存储之如果没有数据库究竟会怎样
本章主要内容是WebStorage与本地数据库,其中WebStorage是对cookie的优化,本地数据库是HTML5添加的一个功能,使用它可以在客户端建立一个数据库大大减轻服务器端的负担,加快访问 ...
html5 自动生成迷宫,HTML5 Canvas随机迷宫生成动画
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 class Line { constructor(x, y, a, c) { this.x1 = x; th ...
html5 自动保存提示,html5+ SQLite提示数据表不存在
mui.init(); //plusReady,用来定义加载dom后的操作 //读取数据 mui.plusReady(function() { var options = { name:'db_not ...
html5 自动矢量化,HTML5中地圖矢量化
我們可以獲取canvas對象為var c=document.getElementById("myCanvas");其應有js屬性方法如下列舉: 1:繪制渲染對象, c.getCon ...
自动滑动图片html5,9个精巧绚丽的jQuery图片滑块动画
本文作者html5tricks,转载请注明出处 jQuery图片滑块动画即 1.jQuery/ 这次我们要来分享一款非常绚丽的jQuery焦点图插件,同时这款焦点图也利用了HTML5和CSS3的相关特 ...
html中如何使图片自动旋转90度,css实现图片旋转90度的方法
css实现图片旋转90度的方法发布时间:2020-08-31 11:44:39 来源:亿速云阅读:550 作者:小新小编给大家分享一下css实现图片旋转90度的方法,相信大部分人都还不怎么了解, ...
HTML5实践 -- 使用css装饰你的图片画廊 - part2
转载请注明原创地址:http://www.cnblogs.com/softlover/archive/2012/11/20/2779893.html 在上一讲中,我们的解决方案使用到了jquery去创 ...
php 图片压缩旋转,移动端图片上传旋转、压缩问题的解决方案
本篇文章就给大家带来移动端图片上传旋转.压缩问题的解决方案.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 前言在手机上通过网页 input 标签拍照上传图片,有一些手机会出现图片 ...

html5自动旋转图片,HTML5画布旋转图片

html5自动旋转图片,HTML5画布旋转图片相关推荐

最新文章

热门文章