<!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. 【面试虐菜】—— LVS负载均衡

    Load Balancer(负载均衡器): Load Balancer是整个集群系统的前端,负责把客户请求转发到Real Server上.Load Balancer通过Ldirectord监测各Rea ...

  2. Android修改system只读权限

    在Root后的真机上使用adb remount命令不知道为什么不行. 但有些时候还是想向system文件夹下面写文件,例如把tcpdump工具放到/system/bin 下面,然后就可以直接使用tcp ...

  3. 敏捷开发之道（四）Scrum概述

    上次的博文敏捷开发之道(二)极限编程XP和敏捷开发之道(三)极限编程XP续中,我们介绍了一下敏捷开发中的XP开发方法,今天咱们来了解另一个比较流行的敏捷开发方法--Scrum. 1.Scrum简介 S ...

  4. .net 自然排序方式

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Cons ...

  5. Android PopupWindow 点击消失解决办法

    1.点击PopupWindow 外部区域时,PopupWindow消失 popMenu = new PopupWindow(getApplicationContext()); popMenu.setW ...

  6. [转载+原创]Emgu CV on C# （四） —— Emgu CV on 全局固定阈值二值化

    重点介绍了全局二值化原理及数学实现,并利用emgucv方法编程实现. 一.理论概述(转载,如果懂图像处理,可以略过,仅用作科普,或者写文章凑字数)  1.概述 图像二值化是图像处理中的一项基本技术,也 ...

  7. 原生JS实现苹果菜单

    今天分享下用原生JS实现苹果菜单效果,这个效果的重点有以下几点 图标中心点到鼠标的距离的算法 利用比例计算图标的宽度 代码地址:https://github.com/peng666/blogs/blo ...

  8. 2434: [Noi2011]阿狸的打字机 - BZOJ

    Description 阿狸喜欢收藏各种稀奇古怪的东西,最近他淘到一台老式的打字机.打字机上只有28个按键,分别印有26个小写英文字母和'B'.'P'两个字母. 经阿狸研究发现,这个打字机是这样工作的 ...

  9. ViewController 优化

    解决问题:部分复杂页面的Controller过于庞大,不利于维护与复用: 复杂的页面大多是基于tableview的页面.复杂页面的代码大致可分为两部分(复杂的View布局用Nib实现的话,一般大家都是 ...

  10. c#中获取服务器IP，客户端IP以及其它

    客户端ip:Request.ServerVariables.Get("Remote_Addr").ToString();客户端主机名:Request.ServerVariables ...