<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    body{background: #131115;}

    #c1{background: #fbf7fe;}

    </style>

    <script>

    window.onload=function(){

        var oC=document.getElementById('c1');

        var oGC=oC.getContext('2d');

        oGC.fillStyle='red';

        oGC.strokeStyle="blue";

        oGC.lineWidth=10;

        /*设置角度*/

        oGC.lineJoin='round';

        /*不带边框的正方形*/

        oGC.fillRect(50,50,100,100);

            /*带边框的正方形*/

        oGC.strokeRect(50.5,50.5,100,100);

        /*背景颜色*/

    }

   </script>

</head>

<body>

    <canvas id="c1" width="500" height="500"><!-- 默认宽300； 高150 -->

    <span>不支持camvas浏览器</span>

    </canvas>

</body>

</html>

三角形

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    body{background: #131115;}

    #c1{background: #fbf7fe;}

    </style>

    <script>

    window.onload=function(){

        var oC=document.getElementById('c1');

        var oGC=oC.getContext('2d');

        /*开始画线*/

        oGC.beginPath();

        /*起始点*/

        oGC.moveTo(100,100);

        /*点*/

        oGC.lineTo(200,200);

        oGC.lineTo(300,200);

        /*闭合*/

        oGC.closePath();

        /*生成线*/

        /*oGC.stroke();*/

        /*充填*/

        oGC.fill();

    }

   </script>

</head>

<body>

    <canvas id="c1" width="500" height="500"><!-- 默认宽300； 高150 -->

    <span>不支持camvas浏览器</span>

    </canvas>

</body>

</html>

canvas封装

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    body{background: #131115;}

    #c1{background: #fbf7fe;}

    </style>

    <script>

    window.onload=function(){

        var oC=document.getElementById('c1');

        var oGC=oC.getContext('2d');

        /*保存路径*/

        oGC.save();

        oGC.fillStyle='red';

        oGC.beginPath();

        /*正方形集合函数*/

        oGC.rect(100,100,100,100);

        oGC.closePath();

        oGC.fill();

        /*恢复路径 oGC.fillStyle='red';不影响下面代码起到封装作用*/

        oGC.restore();

        oGC.beginPath();

        oGC.rect(220,100,100,100);

        oGC.closePath();

        oGC.fill();

    }

   </script>

</head>

<body>

    <canvas id="c1" width="500" height="500"><!-- 默认宽300； 高150 -->

    <span>不支持camvas浏览器</span>

    </canvas>

</body>

</html>

鼠标画线代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    body{background: #131115;}

    #c1{background: #fbf7fe;}

    </style>

    <script>

    window.onload=function(){

        var oC=document.getElementById('c1');

        var oGC=oC.getContext('2d');

        oC.onmousedown=function(ev){

            var ev=ev||window.event;

            oGC.moveTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);

                oC.onmousemove=function(ev){

                   var ev=ev||window.event;

                   oGC.lineTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);

                   oGC.stroke();

                }

                document.onmouseup=function(){

                     oC.onmousemove=null;

                     oC.onmouseup=null;

                }

        }

    }

   </script>

</head>

<body>

    <canvas id="c1" width="500" height="500"><!-- 默认宽300； 高150 -->

    <span>不支持camvas浏览器</span>

    </canvas>

</body>

</html>

简单的方块下滑代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    body{background: #131115;}

    #c1{background: #fbf7fe;}

    </style>

    <script>

    window.onload=function(){

        var oC=document.getElementById('c1');

        var oGC=oC.getContext('2d');

        var num=0;

        oGC.fillStyle='red';

        oGC.fillRect(30,0,100,100);

        setInterval(function(){

                 num++;

                 oGC.clearRect(30,0, oC.width,oC.height);

                 oGC.fillRect(30,num,100,100);

        },30)

    }

   </script>

</head>

<body>

    <canvas id="c1" width="500" height="500"><!-- 默认宽300； 高150 -->

    <span>不支持camvas浏览器</span>

    </canvas>

</body>

</html>

html5——canva 绘图1简单图形的更多相关文章

  1. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  2. HTML5 Canvas绘图如何使用

    --------------复制而来--原地址http://jingyan.baidu.com/article/ed15cb1b2e642a1be369813e.html HTML5 Canvas绘图 ...

  3. Quartz 2D绘制简单图形

    在Quartz 2D中,绘图是通过图形上下文进行绘制的,以下绘制几个简单的图形 首先先创建一个QuartzView.swift文件继承自UIView,然后实现drawRect方法: import UI ...

  4. Java入门：绘制简单图形

    在上一节,我们学习了如何使用swing和awt工具创建一个空的窗口,本节学习如何绘制简单图形. 基本绘图介绍 Java中绘制基本图形,可以使用Java类库中的Graphics类,此类位于java.aw ...

  5. Qt 2D绘图之五：图形视图框架的结构和坐标系统

    一.图形视图框架的结构 在前面讲的基本绘图中,我们可以自己绘制各种图形,并且控制它们.但是,如果需要同时绘制很多个相同或不同的图形,并且要控制它们的移动.检测它们的碰撞和叠加:或者我们想让自己绘制的图 ...

  6. matlab学习笔记9 高级绘图命令_2 图形的高级控制_视点控制和图形旋转_色图和颜色映像_光照和着色

    一起来学matlab-matlab学习笔记9 高级绘图命令_2 图形的高级控制_视点控制和图形旋转_色图和颜色映像_光照和着色 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考书籍 < ...

  7. HTML5 Canvas绘图基本使用方法, H5使用Canvas绘图

    Canvas 是H5的一部分,允许脚本语言动态渲染图像.Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的绘图功能(API),在网 ...

  8. C#开发PACS医学影像处理系统(十二)：绘图处理之图形标记

    在医生实际使用过程中,对于有病灶的影像需要一些2D绘图操作,例如对于病灶的标记和测量, 这就牵涉到在WPF中的2D绘图操作技术,一般的思路是监听鼠标的按下和抬起以及运动轨迹,目前整理出的常用绘图和测量 ...

  9. [ASP.NET] 图形验证码破解-以简单图形为例

    原文 http://www.dotblogs.com.tw/joysdw12/archive/2013/06/08/captcha-cracked.aspx 前言 这次来讲个比较有趣的主题,就是该如何 ...

随机推荐

  1. knockout学习笔记10：demo

    前面已经介绍了ko的基本用法,结合官方文档,基本就可以实际应用了.本章作为ko学习的最后一篇,实现一个简单的demo.主要集中在ko,所以后台数据都是静态的.类似于博园,有一个个人文章的分类列表,一个 ...

  2. 我们都是IT民工---------流浪人IDE开发札记

    你生命中的有些东西终究会失去,比如我住了6年的陈寨,这个聚集了郑州十几万IT民工的地方,说拆就拆了.再比如我玩了3年的坦克英雄,这个带给我太多快乐的游戏,说停就停了. 编程对我而言是种爱好,我上学6年 ...

  3. CCF 201512-4 送货(错误）

    直接用DFS深搜,检查了好久没能发现错误,贴上来以后慢慢看... /* DFS深度优先搜索 Edge保存边 u{v,been} cnt记录走过的街道 如果没有就return ;继续递归 */ #inc ...

  4. Stack的三种含义

    作者: 阮一峰 日期: 2013年11月29日 学习编程的时候,经常会看到stack这个词,它的中文名字叫做"栈". 理解这个概念,对于理解程序的运行至关重要.容易混淆的是,这个词 ...

  5. PPS传奇生死

    地址 :http://game.pps.tv/events/cqss_sign 调用encryptedString('password') RSA加密,通过function(a) 定义 window= ...

  6. git初级--配置

    source: http://www.cnblogs.com/sakurayeah/p/5800424.html 一.注册github账号 github网址https://github.com/ 下一 ...

  7. Mysql的连接状态

    对应mysql的连接,任何时刻都有一个状态.表示mysql当前正在做什么. command里面的状态: sleep:线程正在等待客户发送新的请求. query:正在执行查询或者正在将结果发送客户端 这 ...

  8. 进度条投票-W

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. 教你一招：解决win10/win8.1系统在安装、卸载软件时出现2502、2503错误代码的问题

    经常遇到win10/win8.1系统在安装.卸载软件时出现2502.2503错误代码的问题. 解决办法: 1.打开任务管理器后,切换到“详细信息”选项卡,找到explore.exe这个进程,然后结束进 ...

  10. Oracle时间戳（毫秒）转为Date

    1.SQL ) + TO_DATE('1970-01-01 08:00:00', 'YYYY-MM-DD HH:MI:SS'), 'YYYY-MM-DD HH:MI:SS') AS CDATE FRO ...