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,甚至无法顺畅地通读本文.请点击上述链 ...
随机推荐
- FFMPEG在嵌入式硬件上应用之 —— 基本环境搭建及编译
前段时间在翻看电脑里面资料时,发现了以前做的在嵌入式硬件上面运行以ffmepg为基础,以嵌入式硬件解码的多媒体播放工作,发现都快忘记完了.今日得闲整理温习了一下ffmpeg在嵌入式上的运用,这里给大家 ...
- 架构实例之Demo_JSP_JavaBean
架构实例之Demo_JSP_JavaBean 1.开发工具和开发环境 开发工具: MyEclipse10,JDK1.6.0_13(32位),Tomcat7.0(32位),mysql5.7.1 ...
- 面试题:return和finally执行
创建一个包含return和finally的方法:(如下所示) public class Demo { public int get() { int x=1; try { x++; return x; ...
- 用Access为支撑,书写一个用C#写入数据库的案列
/// <summary> /// 读取Excel文档 /// </summary> /// <param name="Path">文件名称&l ...
- Winform窗体的基本控件
一.窗体的事件 每一个窗体都有一个事件,这个窗体加载完成之后执行哪一段代码 位置:(1)右键属性→事件→load 双击进入.(2)双击窗体任意一个位置进入 public partial class F ...
- java中的大数BigInteger
compareTo比较大小 equals比较是否相等 ,不能用== while(cin.hasNext())//等价于!=EOF n=cin.nextBigInteger();//读入一个大整数 Sy ...
- iOS关于XML解析请求数据
XML数据的请求: 和json请求几乎一样,只有请求参数修改为xml即可: AFHTTPSessionManager *manager = [AFHTTPSessionManager manager] ...
- 14-前端开发之HTML
1. 什么是HTML? HTML (Hyper Text Mark-up Language) 即超文本标记语言,是用来描述网页的一种语言. 它不是一种编程语言,而是一种标记语言 (markup lan ...
- node基础09：第2个node web服务器
1.同时输出文字与图片 在前几个小课程中,我会学会了 从服务器中读取文字字符,并且向浏览器中输出 从服务器中读取图片文件,并且向浏览器中输出 这节课中,我学会了同时向浏览器输出文字,图片.对此,我感到 ...
- 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return fal的区别
今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...