<!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. php 获取链接参数

    private function getQuerystr($url,$key){        $res = '';        $a = strpos($url,'?');        if($ ...

  2. Odoo 库存管理-库存移动（Stock Move）新玩法

    库存移动(Stock Move)新玩法 Odoo的库存移动不仅仅是存货在两个“存货地点”之间的移动的基本概念了,他们可以被“串联”在一起,可以用来生成或改变其对应的拣货单 (Picking).链式库存 ...

  3. 获取枚举Description的Name

    /// <summary> /// 获取枚举Description的Name /// </summary> /// <param name="enumName& ...

  4. ASP.NET对HTML元素进行权限控制（二）

    这是这个权限控制的第一步,扫描界面把要分配权限的元素的信息获取出来存入到数据库中. 这一步分三小步: (1).标出界面所要分配权限的元素 (2).扫描界面获取所要分配权限的元素信息.(ID,标题,层级 ...

  5. String面试题

    //a b c 分别是怎么存储的, a和b a和c分别有什么区别// c和d的区别是什么 String a= "hello";String b= "hello" ...

  6. 把NodeJS注册成Windows服务

    为了让NodeJS开发的网站能在服务器端正常运行,最好把NodeJS需要运行的代码注册成Windows服务,服务器如果重启也不需要重新去启动NodeJS. 1.编写一个执行NodeJS脚本的bat文件 ...

  7. Oracle 存储过程实例

    create or replace procedure PCREPORT is startDate DATE; --起始如期 nowTime DATE; --当前日期 nowTime2 DATE; - ...

  8. P1676陶陶吃苹果 - vijos

    描述 curimit知道陶陶很喜欢吃苹果.于是curimit准备在陶陶生日的时候送给他一棵苹果树. curimit准备了一棵这样的苹果树作为生日礼物:这棵苹果树有n个节点,每个节点上有c[i]个苹果, ...

  9. 客户端服务端通信protocol

    这个协议不知我在上面耗费了多长时间,也有人问过我咋回事,这个protocol不长,但对于我来说理解起来很费劲,今天回来看看忽然看懂了(80%),只能说不知看了多少遍 其实这些东西应该在来的一个月这样子 ...

  10. 01-01-01【Nhibernate (版本3.3.1.4000) 出入江湖】配置文件

    默认配置文件名称是:hibernate.cfg.xml 放置在应用程序集的根目录下 <?xml version="1.0" encoding="utf-8" ...