<!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. 51nod1270 数组的最大代价（简单dp)

    ---恢复内容开始--- 1270 数组的最大代价 题目来源: HackerRank 基准时间限制:1 秒 空间限制:131072 KB 分值: 20 难度:3级算法题  收藏  关注 数组A包含N个 ...

  2. AndroidSDK无法下载API包的解决方法

    1:打开Android SDK Manager”,然后点击菜单栏中的“Tools”菜单选项,接下来只需选择“Options”选项即可打开设置窗体,在打开的选项中找到Others框,里面勾选第一个: F ...

  3. python杂记-5(装饰器)

    1.被装饰的函数有参数(一个参数): def w1(func): def inner(arg): # 验证1 # 验证2 # 验证3 return func(arg) return inner @w1 ...

  4. WPF 一个弧形手势提示动画

    这是一个操作提示动画,一个小手在屏幕上按照一个弧形来回运动 <Window x:Class="LZRichMediaWall.MainWindow" xmlns=" ...

  5. 1105. Spiral Matrix (25)

    This time your job is to fill a sequence of N positive integers into a spiral matrix in non-increasi ...

  6. mysql导入的时候提示“1046-No Database selected”的解决办法

    进入phpmyadmin后,先点击左边的要导入的数据库,进入后再点击右上角的“导入‘按钮即可 详细说明 http://www.xmxwl.net/help/member/20160325/13653. ...

  7. Redis集群明细文档

    Redis目前版本是没有提供集群功能的,如果要实现多台Redis同时提供服务只能通过客户端自身去实现(Memchached也是客户端实现分布式).目前根据文档已经看到Redis正在开发集群功能,其中一 ...

  8. MySQL Server-id的作用

    1. mysql同步的数据中是包含server-id的,用于标识该语句最初是从哪个server写入的,因此server-id一定要有的 2. 每一个同步中的slave在master上都对应一个mast ...

  9. （转）《深入理解java虚拟机》学习笔记10——并发编程（二）

    Java的并发编程是依赖虚拟机内存模型的三个特性实现的: (1).原子性(Atomicity): 原子性是指不可再分的最小操作指令,即单条机器指令,原子性操作任意时刻只能有一个线程,因此是线程安全的. ...

  10. JavaScript 代码片段

    1.无题 if (i && i.charAt(i.length - 1) == "/") { i = i.substr(0, i.length - 1) } 2.无 ...