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() 方 ...
随机推荐
- ps 网页配图设计
网站配图设计 蒙太奇 品科软件---网页页面 1橡皮擦来画两图 容合 大橡皮擦擦出来自然 2图放到一个色块中 用剪贴蒙版 3调色阶 装饰下图片 矩形工具 形状 填充 画彩条 超出本框的怎么去掉多 ...
- python 基础篇（二）数据类型概述
正式进入python的学习. 数据类型可以分为身份,类型,数据项三项联合组成. 身份: id() 类型:type() 数据类型:int,boolean,tuple,string,dict,list 1 ...
- Java并发编程之ThreadLocal类
ThreadLocal类可以理解为ThreadLocalVariable(线程局部变量),提供了get与set等访问接口或方法,这些方法为每个使用该变量的线程都存有一份独立的副本,因此get总是返回当 ...
- cocos2d.js
1.节点是Cocos2d最基础的东西 2.坐标与普通数学坐标一致 3.children属性表示节点的孩子,父节点位置变化,它包含的子节点也会跟着变化,以整体的形势移动 4.层(layer), 新建层: ...
- java学习一目了然——IO
java学习一目了然--IO IO是java学习当中很重要的一部分.IO流实现数据的上传下载,即读写数据,包括输入和输出流,输入流指的是将数据以字符或字节形式从外部媒介比如文件.数据库等读取到内存中所 ...
- 构建混合云：配置Azure site to site VPN连接(1)
用户在构建自己云计算解决方案的时候,往往会选择私有云或者公有云来做部署,但在一些场景下,用户更加希望通过混合云的方案来满足自己的业务需求.Azure为混合云的部署提供多种不同的连接方案,最常见的是 ...
- 在Azure Cloud Service中部署Java Web App（2）
接上文. 9.在进行发布之前,需要对我们的订阅做一些设置,因为默认情况下,Azure的service end指向的是Azure global的站点,如果我们要将服务发布在Azure的中国站点,需要做下 ...
- Delphi与字符编码（实战篇）（MultiByteToWideChar会返回转换后的宽字符串长度）
本文目标: 了解Delphi的字符串类型 字符编码的检测与转换 简体繁体转换 0. 导言 看完“.Net与字符编码(理论篇)”,我们明白了字符是自然语言中的最小单位,在存储和传输的过程中可以使用三种编 ...
- qt 自动完成LineEdit
原地址:http://www.cppblog.com/biao/archive/2009/10/31/99873.html ---------------------------------- ...
- Inno Setup：卸载时判断要调用的dll是否存在
原文 http://zwkufo.blog.163.com/blog/static/2588251201072581947474/ [Code]function SuiteRemovedAlert2: ...