<!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. Hihocoder 太阁最新面经算法竞赛18

    Hihocoder 太阁最新面经算法竞赛18 source: https://hihocoder.com/contest/hihointerview27/problems 题目1 : Big Plus ...

  2. Not Hello World

    通常对于一门语言的学习,一般都是以"Hello,World!"开始的.但对于汇编语言的学习,输出这句话并不容易,首先得了解寄存器等硬件知识. 汇编语言要得以运行,首先要讲源文件编译 ...

  3. 前端必备的js知识点(转载)

    1.本文主体源自:http://www.cnblogs.com/coco1s/p/4029708.html,有兴趣的可以直接去那里看,也可以看看我整理加拓展的.2.js是一门什么样的语言及特点?    ...

  4. RedisUtil 工具类

    package com.test; import redis.clients.jedis.Jedis; import redis.clients.jedis.JedisPool; import red ...

  5. jQuery 树形菜单

    树形菜单 在 jQuery easyu中其左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 tree 需要单击分叉节点前的小三角,才 ...

  6. Mysql触发器

    触发器(trigger)作用:监视某种情况,并触发某种操作. 触发器创建语法四要素: 1.监视地点(table) 2.监视事件(insert/update/delete) 3.触发时间(after/b ...

  7. BZOJ1192 [HNOI2006]鬼谷子的钱袋

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...

  8. Javascript数值转换(string,int,json)

    数值: 在JavaScript中,数值转换一般有三种方式: 一.Number(param)函数:param可以用于任何数据类型 1.1 param是Boolean值,true和false分别转换为1和 ...

  9. 【Android群英传】学习笔记(三·一)

    本篇笔记中,笔者将记录在ListView的使用的技巧 虽然5.X时代,RecyclerView在很多地方都在逐渐取代ListView,但ListView的使用范围还是很广泛的,它这万年老大哥的地位也不 ...

  10. HDU 3669 Cross the Wall

    题目大意 给定 \(N\) 个矩形的宽和高, \((h_1, w_1), (h_2, w_2), \dots, (h_n w_n)\) . 现需要确定 \(k\) (\(k \le K\), \(K\ ...