<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style>

            canvas{

                border: 1px dashed black;

            }

        </style>

        <script>

            window.onload = function(){

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

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

                context.translate(100,100);//平移

                var cop = 10;//试着减小或增大cop的值观察图案变化

                for(var i = 1; i<cop; i++){

                    context.rotate(2*Math.PI*1/(cop-1));//旋转

                    context.rect(0,0,60,60);//画矩形

                }

                context.strokeStyle = "red";

                context.stroke();        

            }

        </script>

    </head>

    <body>

        <canvas id="myCanvas" width="300" height="200">

        </canvas>

    </body>

</html>

HTML5入门九---Canvas画布的更多相关文章

  1. HTML5入门十一---Canvas画布实现画图（二）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. HTML5入门十---Canvas画布实现画图（一）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. HTML5 中的 canvas 画布（一）

    ---恢复内容开始--- 在HTML5中新添加的元素,canvas 现在支持 IE9+的版本 注意:HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript ...

  4. HTML5 中的 canvas 画布（二）

    绘制图片 一.绘制图片 context.drawImage()(即把图片放到canvas里) var image = new Image();  // 先创建图片对象 image.src = '图片的 ...

  5. 用html5的canvas画布绘制贝塞尔曲线

    查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  6. 自学HTML5第四节（canvas画布详解）

    canvas画布好像可是说是HTML5的精华了,一定要学好,嗯嗯,绚丽的东西就要从基础的开始.... 先看看啥玩意叫做canvas 什么是 Canvas? HTML5 的 canvas 元素使用 Ja ...

  7. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  8. HTML5入门以及新标签

    HTML5 学习总结(一)--HTML5入门与新增标签   目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 ...

  9. 推荐10个适合初学者的 HTML5 入门教程

    HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究.借助尖端功能,技术和 API,HTML5 允许你创建响应性.创新性.互动性以及令人惊叹的 ...

随机推荐

  1. WPF 绑定一(数据源为控件)

    xaml: <Window x:Class="WpfApplication1.Window1" xmlns="http://schemas.microsoft.co ...

  2. Android：通过startActivityForResult方法来得到Activity的回传值

    在一些情况下,我们通过 A activity跳转到 B activity上,这时希望 A activtiy能从 B activity上得到一些返回值,这个时候我们就不能使用startActivity方 ...

  3. 水面波浪形View--第三方开源--WaveView（电量、能量、容量指示）

    这种WaveView在一些常见的APP开发中,以水面波浪波形的形象的生动展示手机还剩余多少电量,存储容量还有多少,比较形象直观生动. WaveView在github上的项目主页是:https://gi ...

  4. 最强Android模拟器genymotion的安装与配置

    Android开发人员都知道,原生的模拟器启动比较慢,操作起来也不流畅,还会出现莫名的问题.当然很多人都会选择直接使用android手机来开发,但是有时候需要在投影仪上演示程序的时候手机不太好做到吧. ...

  5. Infobright高性能数据仓库

    1.  概述 Infobright是一款基于独特的专利知识网格技术的列式数据库.Infobright简单易用,快速安装部署,使用中无需复杂操作,能大幅度减少管理工作:在应对50TB甚至更多数据量进行多 ...

  6. 解决ASP.NET使用IIS架设网站时“服务器应用程序不可用”的方法

    服务器应用程序不可用您试图在此 Web 服务器上访问的 Web 应用程序当前不可用.请点击 Web 浏览器中的“刷新”按钮重试您的请求. 管理员注意事项: 详述此特定请求失败原因的错误消息可在 Web ...

  7. snmptrap使用

    SNMP简单网络管理协议,其中其支持的一个命令snmptrap命令,用于模拟向管理机发送trap消息.   启动陷阱方法: snmptrapd -C -c /etc/snmp/snmptrapd.co ...

  8. Lightmapping

    当游戏场景包含了大量的多边形时,实时光源和阴影对游戏性能的影响会很大.这时更适合使用Lightmapping技术,将光线效果预渲染成贴图使用到多边形上模拟光影效果.这种方式不用担心光源数量和阴影对性能 ...

  9. ubuntu12.04之后该死的文件关联

    这是抱怨贴~~~当然也提供了解决方法~敬请期待. 这个帖子中我们介绍如何在ubuntu下安装quartus II 13.1,安装完毕功能正常,但是有个“小问题”就是如何在文件管理器中(这里是nauti ...

  10. sharepoint 认证

    MCPD http://www.microsoft.com/learning/en/us/mcpd-certification.aspx#fbid=YktyKIYXeFg Exam 70-573: T ...