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. maven 相关

    maven相关 一 windows安装配置maven: 1. 官网下载最新版本maven,发布日志时为: maven3.2.1 2.解压maven到相应的目录:配置环境变量: MAVEN_HOME:D ...

  2. How to enables AX email functionality without Outlook

    /***************************************************************** (C) Copyright DENTSPLY Internatio ...

  3. Python 的列表解析和生成表达式的异同

      Python中的列表解析和生成表达式是非常好的特性,他们的形式相似,但是应用场景不太一样. 相似点 列表解析和生成表达式最大的相似点是使用形式: [expr for iter_var in ite ...

  4. 用Redis bitmap统计活跃用户、留存

    Spool的开发者博客,描述了Spool利用Redis的bitmaps相关的操作,进行网站活跃用户统计工作. 原文:http://blog.getspool.com/2011/11/29/fast-e ...

  5. Oracle数据库的创建、数据导入导出

    如何结合Sql脚本和PL/SQL Developer工具来实现创建表空间.创建数据库.备份数据库.还原数据库等操作,然后实现Oracle对象创建.导入数据等操作,方便我们快速了解.创建所需要的部署Sq ...

  6. 【quartz】 入门-配置文件

    quartz 启动 NameValueCollection props = (NameValueCollection)ConfigurationManager.GetSection("qua ...

  7. 手写SqlHelper

    SqlHelper是一个基于.NET Framework的数据库操作组件.组件中包含数据库操作方法,SqlHelper有很多版本,主要以微软一开始发布的SqlHelper类,后面包含进了Enterpr ...

  8. 2659: [Beijing wc2012]算不出的算式 - BZOJ

    最近有点颓废,刷水题,数学题(根本不会做啊) 题意:求 q,p是两个奇质数 网上题解就直接说是几何意义,问了别人才知道 我们在坐标轴上画出来就是在线段y=(q/p)x下方的格点和y=(p/q)x下方的 ...

  9. VMware ESXi虚拟机克隆及迁移

    使用ESXi经常会遇到这样的问题,我需要建立多个虚拟机,都是linux操作系统,难道必须一个一个安装吗? VMware ESXi.VMware vCenter Server 和 vSphere Cli ...

  10. win7旗舰版安装office2007后打开文件提示找不到proplusww.msi

    今天第一次打开2007的excel,出现错误如下: 解决办法: 转自:http://blog.163.com/huacai9420@126/blog/static/521585422011911524 ...