<!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. MySQL练习题参考答案

    MySQL练习题参考答案 2.查询“生物”课程比“物理”课程成绩高的所有学生的学号: 思路: 获取所有有生物课程的人(学号,成绩) - 临时表 获取所有有物理课程的人(学号,成绩) - 临时表 根据[ ...

  2. 多条件分页查找（SQL拼接方法）

    def startTime=params.startTime+" 00:00:00"  def endTime=params.endTime + " 23:59:59&q ...

  3. 初次认识 C# win32 api

    第一次接触win32api,刚开始的时候有点迷迷糊糊的. Windows API 就是windows应用程序接口. win api向上就是windows应用程序,向下就是windows操作系统核心. ...

  4. 学记：为spring boot写一个自动配置

    spring boot遵循"约定优于配置"的原则,使用annotation对一些常规的配置项做默认配置,减少或不使用xml配置,让你的项目快速运行起来.spring boot的神奇 ...

  5. iOS 开发总结（下）

    来源:蝴蝶之梦天使 链接:http://www.jianshu.com/p/d333cf6ae4b0 四十.AFNetworking 传送 form-data 将JSON的数据,转化为NSData, ...

  6. git: 修改commiter 信息

    Committer: root root@localhost.localdomain 您的姓名和邮件地址基于登录名和主机名进行了自动设置.请检查它们正确 与否.您可以通过下面的命令对其进行明确地设置以 ...

  7. PHP判断SESSION过期的方法

    在公共函数function.php中添加如下方法,即可控制用户登录的SESSION有效期 //封装SESSION过期判断方法function start_session($expire = 0){ $ ...

  8. Java开发实践 集合框架 全面分析

    http://www.open-open.com/lib/view/open1474167415464.html

  9. Android SD卡存储

    原创文章,转载请注明出处:http://www.cnblogs.com/baipengzhan/p/Android_SDcard_store.html 一 概念 SD卡存储空间比较大,当需要存取较大的 ...

  10. 精通css 高级web标准解决方案——可视化格式模型-盒模型

    1-盒模型的两种标准: IE :width 和 height属性 是包括padding和border在内的. w3c:width 和 height 属性,就是单纯的内容的宽高,padding 是内容之 ...