1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <style>
  7. canvas{
  8. border: 1px dashed black;
  9. }
  10. </style>
  11. <script>
  12. window.onload = function(){
  13. var canvas = document.getElementById("myCanvas");
  14. var context = canvas.getContext("2d");
  15. context.translate(100,100);//平移
  16. var cop = 10;//试着减小或增大cop的值观察图案变化
  17. for(var i = 1; i<cop; i++){
  18. context.rotate(2*Math.PI*1/(cop-1));//旋转
  19. context.rect(0,0,60,60);//画矩形
  20. }
  21. context.strokeStyle = "red";
  22. context.stroke();
  23.  
  24. }
  25. </script>
  26. </head>
  27. <body>
  28. <canvas id="myCanvas" width="300" height="200">
  29. </canvas>
  30. </body>
  31. </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. dedecms 分页样式

    <div class="dede_pages">  <ul class="pagelist">   {dede:pagelist lis ...

  2. Translation002—Package Index(Android包索引)

    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 看本翻译前请您注意: 本人初学android,可能有的翻译不是非常准确,但本人尽最大努力,不清楚处会做标记,并附 ...

  3. 植物大战僵尸中文第二版和年度版 游戏分析及delphi源码

    00413184 |. E8 77E30100   |CALL PlantsVs.00431500                  ; 地上的物品00413189 |. 8D7424 10     ...

  4. DataSnap数据库连接池,数据集对象池的应用

    传统的应用服务器的开发往往是在ServerMethods单元中拖放一堆TDataSet, TDaTaSetProvider控件,这是一个最简单粗暴的开发方向,往往会造成服务端程序文件的臃肿.服务运行期 ...

  5. oracle创建用户,修改用户,删除用户等关于用户的

    --直接修改底层表 USER$ 更换用户名 1.windows 平台下运行 cmd 2.sqlplus /nolog 3.SQL> conn SYSTEM/123@ORCL as sysdba ...

  6. hexo-github 博客搭建

    安装nodejs 从官网下载系统对应的源码 wget -qO- https://raw.githubusercontent.com/creationix/nvm/master/install.sh | ...

  7. (转) linux目录结构详细介绍

    转自:http://yangrong.blog.51cto.com/6945369/1288072 目录 1.树状目录结构图 2./目录 3./etc/目录 4./usr/目录 5./var/目录 6 ...

  8. vs2010旗舰版后,运行调试一个项目时调试不了,提示的是:无法使用“pc”附加到应用程序“webdev.webserver40.exe(PID:2260”

    具体问题描述: vs2010旗舰版后,运行调试一个项目时调试不了,能编译,按ctrl+f5 可以运行,但是就是调试就不行,提示的是:无法使用“pc”附加到应用程序“webdev.webserver40 ...

  9. get的四种请求形式

    $_GET变量当用户以get方式请求页面并发送数据的时候,$_GET变量就存储了这些数据——get数据!get请求有4种形式:形式1:<form  action=”abc.php”   meth ...

  10. 对象图 Object Diagram

    一.用一张图来介绍一下对象图的基本内容 二.对象图与类图的基本区别 三.对象图实例