HTML5之canvas 7画布旋转

 1 <html>
 2     <head>
 3         <meta charset="UTF-8">
 4         <title>画布旋转</title>
 5         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 6
 7     </head>
 8     <body>
 9         <canvas id="canvas" width="500" height="500"></canvas>
10         <script type="text/javascript">
11             var oCanvas = document.getElementById("canvas");
12             var context = oCanvas.getContext("2d");
13             context.fillStyle = "#ededed";
14             context.fillRect(0, 0, 500, 500);
15             //save
16             context.save();
17             //1.变更坐标原点
18             context.translate(500,500);
19             context.rotate(Math.PI);//旋转
20             context.beginPath();
21             context.fillStyle = "rgba(255,0,0,0.5)";//颜色
22             context.fillRect(450,0,30,180);
23             context.fillRect(400,0,30,120);
24             context.fillRect(350,0,30,210);
25             context.closePath();
26             //restore
27             context.restore();
28
29         </script>
30     </body>
31 </html>
时间: 2024-10-29 13:04:53

HTML5之canvas 7画布旋转的相关文章

如何在html5的canvas画布中绘制gif动态图片

我们都知道如何在html5的canvas画布上绘制静态图片(jpeg, png等),直接用canvas中的drawImage方法即可,那么如何绘制动态图片(gif)? 相信大家都知道动态图片之所以动态,是因为它是由很多图片按一定的帧数顺序播放而成的,因此我们是否也可以模拟这样的帧数,每隔一定的时间重新 绘制图片,就能画出动态图片呢?答案当然是YES.下面就是我自己测试的一个例子,代码如下: 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 &l

【HTML5】Canvas画布

什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. * 添加 canvas 元素.规定元素的 id.宽度和高度: <canvas id="myCanvas" width="200" height="100"></canvas> * canvas 元素本身是没

04 canvas&mdash;&mdash;位移画布和旋转缩放

4.1 缩放 scale() 方法缩放当前绘图,更大或更小 语法:context.scale(scalewidth,scaleheight) scalewidth : 缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推) scaleheight : 缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, etc.) 注意:缩放的是整个画布,缩放后,继续绘制的图形会被放大或缩小 4.2 位移画布 ctx.translate(x,y) 方法重新映射画布上

HTML5 Canvas(画布)实战编程初级篇:基本介绍和基础画布元素

欢迎大家阅读HTML5 Canvas(画布)实战编程初级篇系列,在这个系列中,我们将介绍最简单的HTML5画布编程.包括: 画布元素 绘制直线 绘制曲线 绘制路径 绘制图形 绘制颜色,渐变和图案 绘制图片 绘制文本 相关要求 环境要求:Google Chrome, Firefox, Safari, Opera, 或者 IE9以上的现代浏览器 编程要求:需要有基础的HTML和Javascript编程经验,相关的画布编程将调用Javascript API来处理 HTML Canvas基本元素 HTM

HTML5之Canvas画布

先上代码: <canvas width="1000" height="800">浏览器不支持HTML5!</canvas> <script type="text/javascript"> var canvas = document.querySelector("canvas"); var context = canvas.getContext('2d'); // 设置阴影 context.s

HTML5之Canvas时钟(网页效果--每日一更)

今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:http://webfront.verynet.cc/pc/canvas-clock.html 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由JavaScript控制的即时模式位图区域.即时模式是指在画布上呈现像素的方式, HTML5 Canvas通过JavaScript调用CanvasAPI,在每一帧完全重绘屏幕上的位图.详细将在下面代码进行说明. HTML结构代码

HTML5的Canvas

什么是 Canvas? HTML5的canvas是个很有意思的元素,它通过JavaScript在网页上绘制一个矩形的画布,你可以控制其中的每个像素. 它拥有多种绘制路径.矩形.圆形.字符及添加图像的方法. 我们可以获取canvas对象为var c=document.getElementById("myCanvas");其应有js属性方法如下列举: 1:绘制渲染对象,c.getContext("2d"),获取2d绘图对象,无论我们调用多少次获取的对象都将是相同的对象.

浅尝HTML5之canvas

转自:http://segmentfault.com/a/1190000000661407/ HTML5新标签 HTML5新引入header,footer,article,section,aside和nav,audio,datalist,details,video,progress,embed等标签 section 标签用于标识页面上的重要内容部分.该标签有点类似于将一本书分成几个章节. article 标签标识了 Web 页面中的主要内容. aside 标签表示arcitle元素内容之外的.与

html5的canvas方法的总结

canvas的方法 save()保存当前环境的状态 restore() 返回之前保存过的路径状态和属性 createEvent() getContext()返回一个对象,指出访问绘图功能必要的API toDataUPL() 返回canvas图像的URL 线条样式的属性和方法 属性: lineCap设置或返回线条的结束端点样式 lineJoin设置或返回两条线相交时,所创建的拐角类型 lineWidth设置或返回当前线条的宽度. miterLimit设置或返回最大斜接长度 颜色,样式和阴影属性和方