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,甚至无法顺畅地通读本文.请点击上述链 ...
随机推荐
- android穿越之旅--如何弹出一个非比寻常的窗体
上一篇中介绍了一种闻所未闻在android执行java命令的方法,虽然这是一种非常"高级"的技术,然后并没有什么卵用,因此被移除了博客园首页.实际上也并不是一点用处也没有,对已立即 ...
- 烂泥：haproxy学习之https配置
本文由ilanniweb提供友情赞助,首发于烂泥行天下 想要获得更多的文章,可以关注我的微信ilanniweb. 在前一段时间,我写了几篇有关学习haproxy的文章.今天我们再来介绍下haproxy ...
- 使用scvmm 2012的动态优化管理群集资源
动态优化(Dynamic Optimization)是在scvmm2012之后引入的一个新特性,简单来说,这个特性的功能就如字面意义一样,在群集范围内使用动态迁移VM的方式优化主机的资源,使主机与VM ...
- 利用varnish做Discuz论坛的缓存服务器
实验背景:公司有一台BBS服务器,用的是LNMP的架构搭建的.正好手头有一台空闲的虚拟机,于是想着给BBS前端加一台缓存服务器.于是选定了varnish,搜了很多教程,跌跌撞撞的完成了配置.这其中很多 ...
- 更为简单的Ctrl+S自动刷新浏览器工具-LinrF5
一款自动刷新浏览器的小工具,它通过监听用户的按键,如果在键盘按下 Ctrl+S ,则自动刷新浏览器,操作十分简单,前端开发必备神器,快速提升工作效率,支持IE.火狐以及最新版的chrome33.之前我 ...
- JavaScript 基础回顾——对象
JavaScript是基于对象的解释性语言,全部数据都是对象.在 JavaScript 中并没有 class 的概念,但是可以通过对象和类的模拟来实现面向对象编程. 1.对象 在JavaScript中 ...
- web前端开发分享-css,js工具篇
web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io, ...
- iOS与Html5和JS之间的交互---学习笔记五
首先采用的框架是WebViewJavascriptBridge,采用这套框架可以方便的使iOS与JS交互 一. 流程图(主要介绍思路) 二.iOS端如何使用 首先导入#import "Web ...
- 原生JS实现MVVM模式
欢迎大家指导与讨论 : ) 前言 关于MVVM的原理大家可以参考这篇文章.<[翻译]Object.observe()带来的数据绑定变革 >http://www.tuicool.com/ar ...
- 让easyui 的alert 消息框中的确定按钮支持空格键
var _messager = $.extend({},$.messager);$.extend($.messager,{ alert:function(title, msg, icon, fn){ ...