Canvas绘制图形
1.Canvas绘制一个蓝色的矩形
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title> </head>
<body> <canvas id="myCanvas" width="300" height="200"></canvas> <script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#000099';
ctx.fillRect(0,0,80,100);
</script>
</body>
</html>
显示
2.绘制基本的直线
①绘制直线
<body>
<canvas id="myCanvas"></canvas> <script type="text/javascript">
var canvas=document.getElementById("myCanvas"); //获取Canvas对象
var ctx=canvas.getContext("2d"); //获取上下文对象
ctx.beginPath(); //开始一个新的绘制路径
ctx.moveTo(10,10); //定义直线的起点坐标
ctx.lineTo(200,10); //定义直线的终点坐标
ctx.stroke(); //沿着坐标点顺序的路径绘制直线
ctx.closePath(); //关闭当前的绘制路径
</script>
</body>
显示：
② 绘制二次曲线：
是直线锥面的两腔被一平面所截而得的曲线。二次曲线由一个起点、一个终点和一个控制点决定，当控制点经过圆锥顶点时，曲线变成一个点、直线或者相交直线，当控制点不经过圆锥顶点时，曲线可能是圆、锥圆、双曲线或抛物线。
<body> <canvas id="myCanvas">您的浏览器不支持canvas标签</canvas> <script type="text/javascript">
var canvas=document.getElementById('myCanvas');
if(canvas && canvas.getContext){ //判断Canvas对象是否为空
var ctx = canvas.getContext("2d"); //获取Canvas对象上下文
ctx.beginPath(); //开始一个新的绘制路径
ctx.moveTo(100,50); //定义直线的起点坐标为(100,50)
ctx.quadraticCurveTo(100,15,300,30); //设置二次曲线坐标
ctx.stroke(); //绘制路径
}
</script> </body>
判断Canvas对象是否为空：是因为有些浏览器对Canvas的支持不是很好，为了避免网页运行时出现错误，需要提前判断。
显示：
③绘制贝赛尔曲线
每一个顶点都有两个控制点，用于控制在该顶点两侧的曲线的弧度。它的一个起点、一个终点、两个控制点，共四个点决定一条曲线。是用Canvas的bezierCurveTo函数绘制贝赛尔函数
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>4.2.3.html</title>
</head>
<body>
<canvas id="myCanvas">您的浏览器不支持canvas标签</canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
if(canvas && canvas.getContext){ //判断Canvas对象是否为空
var ctx = canvas.getContext("2d"); //获取Canvas对象上下文
ctx.beginPath(); //开始一个新的绘制路径
ctx.moveTo(50,200); //定义直线的起点坐标为(50,200)
ctx.bezierCurveTo(50,100,200,100,200,150); //设置贝塞尔曲线坐标
ctx.stroke(); //绘制路径
}
</script>
</body>
</html>
显示：
④绘制圆弧
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>4.2.4.html</title>
</head>
<body> <canvas id="myCanvas">您的浏览器不支持canvas标签</canvas> <script type="text/javascript">
var canvas=document.getElementById('myCanvas'); if(canvas && canvas.getContext){ //判断Canvas对象是否为空
var ctx = canvas.getContext("2d"); //获取Canvas对象上下文
ctx.beginPath(); //开始一个新的绘制路径
ctx.arc(100,75,50,0,2*Math.PI*0.75); //设置圆弧坐标
ctx.stroke(); //绘制路径
}
</script>
</body>
</html>
显示：
3.绘制简单形状
①绘制圆形
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>4.3.1.html</title>
</head>
<body> <canvas id="myCanvas">您的浏览器不支持canvas标签</canvas> <script type="text/javascript">
var canvas=document.getElementById('myCanvas');
if(canvas && canvas.getContext){ //判断Canvas对象是否为空
var ctx = canvas.getContext("2d"); //获取Canvas对象上下文
ctx.beginPath(); //开始一个新的绘制路径
ctx.arc(100,75,50,0,2*Math.PI); //设置圆坐标
ctx.stroke(); //绘制路径
}
</script>
</body>
</html>
显示：
②绘制三角形
绘制三条直线，并设置三条直线的起点和终点相互连接
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body> <canvas id="myCanvas"></canvas> <script type="text/javascript">
var canvas=document.getElementById('myCanvas');
if(canvas && canvas.getContext){ //判断Canvas对象是否为空
var ctx=canvas.getContext("2d"); //获取Canvas对象上下文
ctx.beginPath(); //开始一个新的绘制路径
ctx.moveTo(0,10); //设置三角形的起点
ctx.lineTo(200,20); //设置三角形的第二个起点
ctx.lineTo(280,100); //设置三角形的第三个起点起点
ctx.closePath(); //将三角形第三个点与起点连接
ctx.stroke(); //绘制路径
}
</script>
</body>
</html>
显示：
③绘制圆角矩阵
将使用arcTo函数绘制圆角矩阵，arcTo（x1,x2,y1,y2,r）:绘制介于两个切线之间的圆弧，坐标点(x1,y1)为圆弧的起点坐标，（x2,y2）为圆弧的终点坐标，r为圆弧的半径。
<body>
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById("myCanvas");
if(canvas && canvas.getContext){
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(10,10); //在左上方开始
ctx.arcTo(100,10,100,20,10); //绘制右上方圆角
ctx.arcTo(100,110,90,110,10); //绘制右下方圆角
ctx.arcTo( 0,110,0,100,10); //绘制左下方圆角
ctx.arcTo( 0,10,10,10,10); //绘制左上方圆角
ctx.stroke();
}
</script>
</body>
显示：
④绘制自定义图形
<body> <canvas id="myCanvas"></canvas> <script type="text/javascript">
var canvas=document.getElementById("myCanvas");
if(canvas && canvas.getContext){
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); //在左上方开始
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); //在左上方开始
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); //在左上方开始
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); //在左上方开始 ctx.stroke();
}
</script>
</body>
笑脸：
Canvas绘制图形的更多相关文章
- html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
- HTML5—canvas绘制图形（1）
1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“ ...
- canvas 绘制图形
canvas 绘制图形: 注意: canvas 的宽高设置在行内,否则会使画布(canvas)产生扭曲,绘图变形: <!DOCTYPE html> <html lang=" ...
- [Selenium] 操作 HTML5 中的 Canvas 绘制图形
测试 http://literallycanvas.com/ 以 Chrome Driver 为例阐述,通过 Actions 在 Canvas 上绘制一个封闭图形.对于 Canvas 上的操作,推荐 ...
- 使用Canvas绘制图形的基本教程
原文地址:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以 ...
- HTML5之Canvas绘图——使用Canvas绘制图形的基本教程
原文转自:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以 ...
- HTML5 canvas绘制图形
demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- HTML5使用Canvas来绘制图形
一.Canvas标签: 1.HTML5<canvas>元素用于图形的绘制,通过脚本(通常是javascript)来完成. 2.<canvas>标签只是图形容器,必须使用脚本来绘 ...
- 使用html5 canvas绘制图片
注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...
随机推荐
- Loadrunner代理录制设置
使用LR代理录制原理 启用LR代理服务器监听设置好的端口号是否有请求信息发送给服务器,有请求时,代理服务器接收带请求,并转发给对应的系统服务器,LR从而获取到请求的信息与数据,生成脚本. 使用代理的前 ...
- Linux下磁盘挂载
公司硬盘不够用了,新买了一个存储,需要挂载到现在的系统上.前期的步骤就不说了,运维全部搞定,无非是硬件和网络那一套,这里只说分配到本人后在Linux下如何挂载. 具体步骤如下: 1.查看是否已经分配 ...
- ARM嵌入式开发板
iTOP-4412 ARM嵌入式开发板----主要特点 iTOP-4412开发平台是北京迅为电子研发设计的嵌入式开发板平台,核心板配备64位双通道2GB DDR3,16GBEMMC存储,三星原厂S5M ...
- quartz集群分布式(并发)部署解决方案-Spring
项目中使用分布式并发部署定时任务,多台跨JVM,按照常理逻辑每个JVM的定时任务会各自运行,这样就会存在问题,多台分布式JVM机器的应用服务同时干活,一个是加重服务负担,另外一个是存在严重的逻辑问题, ...
- css3伪类温故知新
今天遇到一个问题.要求::after 和 ::before的 content:"content" 能够动态的进行变换,能被JavaScript操作. 百度了下,自己做了实验,发现有 ...
- tfs2012迁移，只用到源代码管理
背景:在虚拟机里面安装的tfs,后来发觉C盘空间太少了,运行卡,准备重新配置一台虚拟机当做tfs服务器.安装相同版本的tfs.数据库(至少比原来的版本一样或者更高版本,要不附加不了数据库). 1.确保 ...
- Android View 事件分发机制 源码解析 （上）
一直想写事件分发机制的文章,不管咋样,也得自己研究下事件分发的源码,写出心得~ 首先我们先写个简单的例子来测试View的事件转发的流程~ 1.案例 为了更好的研究View的事件转发,我们自定以一个My ...
- 关于Linux与Windows的区别的文章
你从来只用过Windows,从来没接触过UNIX,只知道把一个文件拽来拽去,只知道硬盘就是C: D: E:却从来没有研究过分区表,也许 会用VC编个程序,很习惯它的集成环境.... 有一天,不管什么原 ...
- ECMAScript 6 Features 中文版
ECMAScript 6 Features 中文版 如词不达意,欢迎提 PR & issue 采用中英混排的方式进行译制,如不解请查看对应原文 本文档将与原作者的 文档 保持同步更新,欢迎关注 ...
- Learning to rank 介绍
PS:文章主要转载自CSDN大神hguisu的文章"机器学习排序": http://blog.csdn.net/hguisu/article/details/79 ...