<!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. OS X EI Capitan安装mcrypt

    OS X EI Capitan安装mcrypt   (我的博客原文:http://www.jmolboy.com/2015/12/01/mcrypt-extension-on-EI-Capitan/) ...

  2. 51nod1269 B君的圆锥

    1629 B君的圆锥 基准时间限制:1 秒 空间限制:131072 KB 分值: 10 难度:2级算法题  收藏  关注 B君要用一个表面积为S的圆锥将白山云包起来.   B君希望包住的白山云体积尽量 ...

  3. 关于PHP Websocket 错误: "stream_select(): You MUST recompile PHP with a larger value of FD_SETSIZE" 的解决方案

    最近在使用Ratchet (一个PHP websocket框架)改造一个PHP网站的时候,出现了错误: "It is set to 1024, but you have descriptor ...

  4. 客户端访问WebService和PageMethod

    客户端访问WebService 客户端访问WebService和后台访问WebService没什么不同,注意的地方是要在ScriptManager中添加 <Services>        ...

  5. Nginx+uWSGI+Django原理

    Python的Web开发中,如果使用Django框架,那么较为成熟稳定的服务器架构一般是Nginx+uWSGI+Django.而为什么一定要三个结合在一起呢?直接使用Django的runserver来 ...

  6. macos port总结

    http://stackoverflow.com/questions/733951/unable-to-download-the-source-code-of-open-source-projects ...

  7. 结构体，公用体，枚举类型的sizeof

    1)枚举类enum型空间计算 enum只是定义了一个常量集合,里面没有“元素”,而枚举类型是当做int来存储的,所以枚举类型的sizeof值都为4 enum color(red,pink,white, ...

  8. cocos2dx中常见的类及类继承关系

    场景:CCScene,继承自CCNode,几乎完全等于CCNode类 CCNode继承自CCObject,CCObject是真正意义上的父类,CCObject又继承自CCCopying类,CCCopy ...

  9. xk01创建供应商保存的时候，提示错误“科目800001已经存在”

    解决方法:

  10. Eclipse中的Web项目自动部署到Tomcat(转)

    转自:http://www.cnblogs.com/ywl925/p/3815173.html 问题: 这里就有个问题,是怎么把Eclipse中的网站项目自动部署到tomcat中.在Eclipse中做 ...