<!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. 常见web攻击以及防御

    xss攻击: 跨站脚本攻击,攻击者在网页中嵌入恶意代码,当用户打开网页,脚本程序便开始在客户端的浏览器上执行,以盗取客户端cookie,用户名密码,下载执行病毒木马程序,甚至是获取客户端admin权限 ...

  2. 日货EmEditor的使用小技巧

    1.查看->大纲向导,可层级显示HTML 2.工具->插件->资源管理器,可在左侧显示资源管理器 3.工具->插件->单词自动完成,可实现单词智能提示功能

  3. CSS你可能还不知道的一些知识点

    一.特殊选择器 1.* 用于匹配任何的标记 2.> 用于指定父子节点关系 3.E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F 4.E ~ F 匹配所有E元素之后的同级元素F 5. ...

  4. 小公司0成本基于Pythony的单元\GUI\Web自动化\性能的几个开源软件测试工具

    以下是当前流行的几款适合小公司0成本的几个开源软件测试解决方案: 1.单元测试 a.unittest :Python自带的单元测试框架 b.pyunit:Junit的Python版本 2.使用Pyho ...

  5. jdk 环境变量配置

    环境变量:Path %JAVA_HOME%\bin;%JAVA_HOME%\jre\binCLASSPATH .;%JAVA_HOME%\lib;JAVA_HOME D:\java\jdk1.5.0_ ...

  6. 解决UINavigationController在pushViewController时出现的"卡顿"问题

    进行开发中,遇到了个小问题: 在使用UINavigationController的-pushViewController:animated:执行入栈一个子控制器操作时(即最新栈顶子控制器),会出现推出 ...

  7. ffmpeg获取文件的总时长（mp3/mp4/flv等）

    使用ffmpeg.exe获取文件属性信息,C#中可以在进程外异步调用这个工具,如下: using (System.Diagnostics.Process pro = new System.Diagno ...

  8. GStreamer 记录

    GStreamer 是一个新的多媒体框架,大大简化了多媒体工具的开发流程,比如,这里有一个 IBM 的文档,介绍了一个 MP3 播放器. http://www.ibm.com/developerwor ...

  9. Git，non-fast-forward

    当把coding好的code,push到Git时会出现这个错误:master[rejected  non-fast-forward] 问题(Non-fast-forward)的出现原因在于:git仓库 ...

  10. 5 Django系列之通过list_display展示多对多与外键内容在admin-web界面下

    list_display展示多对多关系的内容 表结构关系 表一 class Server(models.Model): asset = models.OneToOneField('Asset') cr ...