<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片旋转</title>
</head>
<body>
<div id="result-stub" class="well hidden">
<canvas id="canvas" width="345" height="345">
<p>你的浏览器不支持canvas元素</p>
</canvas>
</div>
<script>
window.onload=function() {
//1、 获取到画布对象以及画布的上下文对象
var canvas = document.getElementById('canvas')
var context = canvas.getContext('2d')
//2、 在画布上进行图片绘制
var img = new Image()
img.src = 'fist-pump-baby.jpg'//这里是绘制图片的路径
img.onload = function() {
context.drawImage(img, 0, 0)
}
//3、 设置画布旋转
context.rotate(0.2)//通过rotate方法以弧度为参数旋转图像
//在rotate中传入的参数为弧度。如果你对弧度不太了解，在HTML5中还提供了一个函数degreeToRadians（）。它可以将度数转换为弧度。这里传入-15，即表示将图像向左旋转15度。如需把旋转的角度转换为弧度的公式为：( 度数*PI )/ 180。这两种传入弧度的方法你选择一种即可。
//context.rotate(degreesToRadians(-15))
}
</script>
<script src="jquery.js"></script>
</body>
</html>
这些都是有关于HTML5新特性的一些应用。给你推荐一个教程网站秒秒学，该网站上有关于HTML5新特性的讲解，可以去看看，希望对你有帮助。
html5中设置整页背景图片的方法是利用css3样式：写法如下：img.bg { /* Set rules to fill background */ min-height: 100% min-width: 1024px /* Set up proportionate scaling */ width: 100% height: auto /* Set up positioning */ position: fixed top: 0 left: 0}@media screen and (max-width: 1024px) { /* Specific to this particular image */ img.bg {left: 50% margin-left: -512px /* 50% */ }}
多媒体：之前曾经介绍过，在HTML5中可以通过<video>标签在网页中播放影片，且不需要再安装额外的插件，此功能已经带给用户极大的便利。但基本的<video>标签只提供了简单功能的播放器界面，如果想要改变播放器的外观和功能，只能结合<canvas>标签和javascript语句，就能制作出酷炫的播放控制器。
{drawImage}
画布canvas如何与视频video标签结合，达到制作各种视频功能的效果呢？其秘诀在于通过画布重新描绘一次视频的内容，将视频的每个画面都转换成画布的图像，这样就可以通过javascript语言所提供的图像控制方法来 *** 控它们。所以炫酷播放器所使用的视频功能，并不针对video，而是针对描绘出影像的canvas。
能够描绘影像到画布中的方法是“drawImage"，此方法允许在canvas中插入画布（canvas），图像（img）和视频（video）等元素。
drawImage方法有三种：
drawImage（image，dx，dy）//原比例绘制图像
drawImage（image，dx，dy，dw，dh）//按设置长宽绘制图像
drawImage（image，sx，sy，sw，sh，dx，dy，dw，dh）//裁切后绘制图像
html5中是通过css3的background-size来控制自适应的。
直接在图片代码里面设置style，例如<img src="xxx.jpg" style="max-width:100%"/>2、要么给图片统一一个class名例如response-img，然后在css文件里面设置这个class
html5
万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改（这是一项推荐标准、外语原文：W3C Recommendation、见本处参考资料原文内容）
2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）