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,甚至无法顺畅地通读本文.请点击上述链 ...
随机推荐
- php应用jquery做ajax操作
以下是全部代码: <html> <head> <title>jQuery Ajax 实例演示</title> </head> <scr ...
- android Intent使用
ntent.setType(“image/*”);//图片格式 intent.setType(“audio/*”); //选择音频 intent.setType(“video/*”); //选择视频 ...
- 数据库SQL基本操作
1.查询表结构 desc 表名 2.显示当前连接用户 show user 3.查看系统拥有哪些用户 select * from all_users; 4.查询当前用户下所有对象 select * fr ...
- GCC 中零长数组与变长数组
前两天看程序,发现在某个函数中有下面这段程序: int n; //define a variable n int array[n]; //define an array with length n 在 ...
- echarts在.Net中使用实例(二) 使用ajax动态加载数据
通过上一篇文章可以知道和echarts参考手册可知,series字段就是用来存储我们显示的数据,所以我们只需要用ajax来获取series的值就可以. option 名称 描述 {color}back ...
- [LeetCode] The Skyline Problem
A city's skyline is the outer contour of the silhouette formed by all the buildings in that city whe ...
- Prototype原型（创建型模式）
依赖关系的倒置:抽象不应该依赖于实现的细节,实现细节应该依赖于抽象. 原型模式的定义 用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象.prototype模式允许一个对象再创建另外一个可 ...
- 云计算之路-阿里云上：10:28-10:51云盾清洗以及IP切换引发的主站访问故障
大家好,非常抱歉!今天10:28-10:51期间由于阿里云云盾流量清洗,以及切换IP后负载均衡的带宽跑满,影响了主站的正常访问,给您造成了很大的麻烦,请您谅解! 故障的过程是这样的: 10:28,我们 ...
- JS正则表达式基本概念
1.正则表达式(Regular Expression) 在JS里是RegExp 两种字义方式 1. var patt1=new RegExp("e"); 2. var patt1 ...
- Centos6.5入侵清理
今天早上来,网站打不开.通过xshell打不开终端,很久才打开.发现内存占用率高达95%,loadavg 15 16 16 现状: 负载太高 15 15 ...