HTML5 canvas绘制线条曲线
HTML5 canvas入门 线条例子
1、简单线条
2、三角形
3、填充三角形背景颜色
4、线条颜色以及线条大小
5、二次贝塞尔曲线
6、三次贝塞尔曲线
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="keywords" content="脚本小子_小贝_HTML5_canvas线条"/>
<meta name="description" content="脚本小子_小贝_HTML5_canvas线条"/>
<meta name="" content="脚本小子小贝 xiaobei qq:2801616735"/>
<title>HTML5_canvas线条</title>
<style>
.divbox{
border:1px solid black;
float:left;
width:95%;
padding:5px;
}
.divcanvas
{
float:left;
}
canvas{
border:1px solid red;
}
.divinfo
{
float:left;
padding:10px;
width:500px;
height:auto;
border:1px solid black;
}
.divclear
{
clear:both;
}
</style>
</head> <body>
<h2>HTML5_canvas线条</h2>
<ul>
<li>1、简单线条</li>
<li>2、三角形</li>
<li>3、填充三角形背景颜色</li>
<li>4、线条颜色以及线条大小</li>
<li>5、二次贝塞尔曲线</li>
<li>6、三次贝塞尔曲线</li>
</ul>
<hr/>
<h3>1、简单线条</h3>
<div class="divbox">
<div class="divcanvas">
<canvas id="canvas1" width="400" height="150"></canvas>
</div>
<div class="divcanvas">
<button onclick="func(1);">创建线条</button>
</div>
<div class="divinfo" id="info1" style="display:none;">
ctx.beginPath(); //开始新路径<br/>
ctx.moveTo(10,10); //线条定位起点<br/>
ctx.lineTo(20,50); //线条定位终点<br/>
ctx.stroke(); //画线条<br/>
</div>
</div>
<div class="divclear"></div>
<hr/>
<h3>2、三角形</h3>
<div class="divbox">
<div class="divcanvas">
<canvas id="canvas2" width="400" height="150"></canvas>
</div>
<div class="divcanvas">
<button onclick="func(2);">创建三角形</button>
</div>
<div class="divinfo" id="info2" style="display:none;">
ctx.beginPath(); //开始新路径<br/>
ctx.lineWidth = 10; //线条宽度大小<br/>
ctx.lineJoin = "round"; //线条相交时夹角形状 bevel==>创建斜角 round==>创建圆角 miter==>创建尖角(默认)<br/>
ctx.moveTo(50,50); //线条定位起点<br/>
ctx.lineTo(50,100); //线条定位终点<br/>
ctx.lineTo(100,100); //线条定位终点<br/>
ctx.closePath(); //创建从当前点到开始点的路径<br/>
ctx.stroke(); //画线条
</div>
</div>
<div class="divclear"></div>
<hr/>
<h3>3、填充三角形背景颜色</h3>
<div class="divbox">
<div class="divcanvas">
<canvas id="canvas3" width="400" height="150"></canvas>
</div>
<div class="divcanvas">
<button onclick="changeColor(3,'red');">填充红色</button>
<button onclick="changeColor(3,'blue');">填充蓝色</button>
</div>
<div class="divinfo" id="info3" style="display:none;">
ctx.beginPath(); //开始新路径<br/>
ctx.lineWidth = 10; //线条宽度大小<br/>
ctx.lineJoin = "round"; //线条相交时夹角形状 bevel==>创建斜角 round==>创建圆角 miter==>创建尖角(默认)<br/>
ctx.moveTo(50,50); //线条定位起点<br/>
ctx.lineTo(50,100); //线条定位终点<br/>
ctx.lineTo(100,100); //线条定位终点<br/>
ctx.closePath(); //创建从当前点到开始点的路径<br/>
ctx.stroke(); //画线条 <br/>
ctx.fillStyle = "color" //填充的颜色设置<br/>
ctx.fill(); //进行填充操作
</div>
</div>
<div class="divclear"></div>
<hr/>
<h3>4、线条颜色以及线条大小</h3>
<div class="divbox">
<div class="divcanvas">
<canvas id="canvas4" width="400" height="150"></canvas>
</div>
<div class="divcanvas">
<button onclick="changeColor(4,'red');">创建红色</button>
<button onclick="changeColor(4,'blue');">创建蓝色</button>
</div>
<div class="divinfo" id="info4" style="display:none;">
ctx.beginPath(); //开始新路径<br/>
ctx.lineWidth = 10; //线条宽度大小<br/>
ctx.strokeStyle = lineColor; //线条颜色<br/>
ctx.moveTo(50,50); //线条定位起点<br/>
ctx.lineTo(50,100); //线条定位终点<br/>
ctx.stroke(); //画线条
</div>
</div>
<div class="divclear"></div>
<hr/>
<h3>5、二次贝塞尔曲线</h3>
<div class="divbox">
<div class="divcanvas">
<canvas id="canvas5" width="400" height="150"></canvas>
</div>
<div class="divcanvas">
<button onclick="func(5);">二次贝塞尔曲线</button>
</div>
<div class="divinfo" id="info5" style="display:none;">
ctx.beginPath(); //开始新路径<br/>
ctx.moveTo(30,30); //线条定位起点<br/>
ctx.quadraticCurveTo(40,100,200,40); //(x1,y1,x2,y2) (x1,y1)为控制点 (x2,y2)为结束点<br/>
ctx.stroke(); //画线条
</div>
</div>
<div class="divclear"></div>
<hr/>
<h3>6、三次贝塞尔曲线</h3>
<div class="divbox">
<div class="divcanvas">
<canvas id="canvas6" width="400" height="150"></canvas>
</div>
<div class="divcanvas">
<button onclick="func(6);">三次贝塞尔曲线</button>
</div>
<div class="divinfo" id="info6" style="display:none;">
ctx.beginPath(); //开始新路径<br/>
ctx.moveTo(30,30); //线条定位起点<br/>
ctx.bezierCurveTo(30,100,140,100,140,40); //(x1,y1,x2,y2,x3,y3) (x1,y1)为控制点1 (x2,y2)为控制点2 (x3,y3)为结束点<br/>
ctx.stroke(); //画线条
</div>
</div>
</body>
<script>
var lineColor = 'black';
var lineWidth = '10';
function changeColor(id,color)
{
lineColor = color;
func(id);
} function func(id)
{
var c = document.getElementById("canvas"+id);
var ctx = c.getContext("2d");
switch(id)
{
case 1:
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(20,50);
ctx.stroke();
break;
case 2:
ctx.beginPath();
ctx.lineWidth = 10;
ctx.lineJoin = "round"; //bevel==>创建斜角 round==>创建圆角 miter==>创建尖角(默认)
ctx.moveTo(50,50);
ctx.lineTo(50,100);
ctx.lineTo(100,100);
ctx.closePath();
ctx.stroke();
break;
case 3:
ctx.beginPath();
ctx.lineWidth = 10;
ctx.lineJoin = "round"; //bevel==>创建斜角 round==>创建圆角 miter==>创建尖角(默认)
ctx.moveTo(50,50);
ctx.lineTo(50,100);
ctx.lineTo(100,100);
ctx.closePath();
ctx.stroke();
ctx.fillStyle = lineColor;
ctx.fill();
break;
case 4:
ctx.beginPath();
ctx.lineWidth = lineWidth;
ctx.strokeStyle = lineColor;
ctx.moveTo(100,50);
ctx.lineTo(50,100);
ctx.stroke();
break;
case 5:
ctx.beginPath();
ctx.moveTo(30,30);
ctx.quadraticCurveTo(40,100,200,40);
ctx.stroke();
break;
case 6:
ctx.beginPath();
ctx.moveTo(30,30);
ctx.bezierCurveTo(30,100,140,100,140,40);
ctx.stroke();
break;
}
document.getElementById("info"+id).style.display = "";
}
</script> </html>
HTML5 canvas绘制线条曲线的更多相关文章
- 使用html5 Canvas绘制线条(直线、折线等)
使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeSty ...
- html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
- 学习笔记：HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
- 使用 HTML5 Canvas 绘制出惊艳的水滴效果
HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...
- 使用html5 canvas绘制图片
注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...
- 使用html5 canvas绘制圆形或弧线
注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...
- canvas绘制贝塞尔曲线
原文:canvas绘制贝塞尔曲线 1.绘制二次方贝塞尔曲线 quadraticCurveTo(cp1x,cp1y,x,y); 其中参数cp1x和cp1y是控制点的坐标,x和y是终点坐标 数学公式表示如 ...
- 解决html5 canvas 绘制字体、图片与图形模糊问题
html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...
- html5 canvas绘制环形进度条，环形渐变色仪表图
html5 canvas绘制环形进度条,环形渐变色仪表图 在绘制圆环前,我们需要知道canvas arc() 方 ...
随机推荐
- locate: can not stat () `/var/lib/mlocate/mlocate.db': No such file or directory
安装好CentOS后,第一次进入系统使用locate命令,结果出现:locate: can not stat () `/var/lib/mlocate/mlocate.db': No such fil ...
- java菜鸟篇<四> ZTree入门篇
今天准备入手ZTree,于是在百度上搜了搜,找到了开源网址和一些大神们的教程,于是乎下午开始了组织树(ZTree)的练习 初步完整的作品是这个样子的: 1.咱们要去这个工具的开源网里找下载的东西: ( ...
- linux下C++对线程的封装
之前一直是使用C语言,前段时间转做C++.无论使用什么语言,多线程编程都是不可或缺的.最近项目中又用到了线程,现在将线程的封装做出总结: 1.线程类中应该包含线程ID.线程的状态以及线程基本操作等. ...
- C#控制台程序本地化应用（Localization）
本地化在百度百科上的解释如下: “软件本地化是指将某一产品的用户界面(UI)和辅助材料(文档资料和在线帮助菜单)从其原产国语言向另一种语言转化,使之适应某一外国语言和文化的过程.” 其原理主要是把相同 ...
- stream~filestream
http://blog.csdn.net/feliciafay/article/details/6157356 http://blog.csdn.net/feliciafay/article/deta ...
- delphi 获取北京时间（使用XMLHTTP获取百度的时间，WebBrowser获取www.timedate.cn的时间）
方法一: uses ComObj, DateUtils; function GetInternetTime: string; var XmlHttp: OleVariant; datetxt: str ...
- 常用的wsdl地址
天气预报Web Service,数据来源于中国气象局 Endpoint Disco WSDL IP地址来源搜索Web Service(是目前最完整的IP地址数据) Endpoint Disco WSD ...
- haproxy redirect prefix
acl short_domain hdr(Host) -i etiantian.org redirect prefix http://www.etiantian.org code 301 if sho ...
- 图片拉伸: stretchableImageWithLeftCapWidth
- (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight: (NSInteger)topCa ...
- EF框架+Lamada表达式（联合多表lamada表达式的用法）
有俩张表对应的EF框架的类Reviews和Commodity_Review,新建一个新的类,字段是联合俩张表后自己需要展示的字段ReviewsShow IQueryable<ReviewsSho ...