<!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. appium常用方法整理

    1.相对坐标解锁九宫格 应用场景 QQ解锁屏幕如上,可见九个按键在同一个View下面,要实现解锁,用press   moveTo  release  perform方法 实现代码如下: WebElem ...

  2. MSMQ学习

    一.理论准备 MSMQ(MicroSoft Message Queue,微软消息队列)官方的解释是:在多个不同的应用之间实现相互通信的一种异步传输模式,相互通信的应用可以分布于同一台机器上,也可以分布 ...

  3. java 方法

    方法命名规范要求 类的命名规范:“全部单词的 首字母必须大写”.那么在定义方法的时候也是有命名规范要求的:“第 一个单词的首字母小写,之后每个单词的首字母大写”,那么这就是方法 的命名规范. 递归调用 ...

  4. HDU 5944 Fxx and string（暴力/枚举）

    传送门 Fxx and string Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Othe ...

  5. [bigdata] hadoop 参数配置解析

    ResourceManager相关配置参数 yarn-site.xml 中配置 yarn.resourcemanager.address ResourceManager 对客户端暴露的地址.客户端通过 ...

  6. WKWebView与JavaScript交互基础

    login.html 代码 <!DOCTYPE html> <html> <head> <title>使用JavaScript</title> ...

  7. delphi 2010与delphi XE破解版的冲突

    在系统中同时安装了Dephi 2010LITE版与Delphi XE lite后,总是会有一个有问题 是因为两者都是读取C:\ProgramData\Embarcadero目录下的license文件, ...

  8. TomCat的安装与配置方法

    经过自己的研究,各种烦,所以要写个博客,帮助大家安装这个软件. 一.安装TomCat(因为大家都安装了jdk,所以就不写了) 1.下载TomCat 网址如下:http://tomcat.apache. ...

  9. Swift -Login(MVC 纯代码)

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 24.0px Menlo; color: #000000 } span.s1 { } span.s2 { c ...

  10. MS10-087微软OFFICE漏洞【参考拿机模拟】

    [声明:以下测试仅仅为了学习用途,模仿尝试与博主无关] 工  具:metasploit 目标机:windows xp sp3  步骤: 1.使用msf创建特殊代码的doc文档 命令: msfconso ...