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() 方 ...
随机推荐
- web.xml中的主要元素说明（listener, filter, servlet）
web.xml中加载的顺序为:context-param ---> listener ---> filter ---> servlet. listener:主要针对的是对象的操作,如 ...
- c++网络通信（与服务器通信聊天）和c#网络通信
c++网络通信(有待整理) 链接:http://pan.baidu.com/s/1i3nMLKT 密码:ksi8 c#网络通信(tcp/udp两部分) TCP发送端: using System; us ...
- inline 间距
今天看了内联元素的间距: http://blog.csdn.net/hedong37518585/article/details/6657853
- javaSE读取Properties文件的六种方法
使用JavaSEAPI读取Properties文件的六种方法 1.使用java.util.Properties类的load()方法 示例:InputStreamin=lnewBufferedInput ...
- css3变形讲解
Transform变形:可以实现文字或者图片旋转.缩放.倾斜和移动,并且该元素下的所有子元素都随着父元素一样. 既然接触到transform,我们就可以做好多3d的效果啦 旋转:transform:r ...
- 【测试环境】java|jdk|ant
很多文章都有写啊,我只是汇总一下:现在java已经是1.7+了,但是我们很多的时候开发环境还是在1.5.16左右,需要自己去配置: 0.为了方便切换测试环境,我们可以把jdk放到一个比较固定的位置.比 ...
- SQL Server 内存压力解决方案
外部压力: 表现形式: 1.total server memory ↓ 2.avilable Mbyte 平衡 3.working set ↓ 如果说SQ ...
- Make a travel blog by Blogabond the theme of wordpress
We can record our place which we have ever went.If you want to know any more you can visit :http://w ...
- 栈ADT的数组实现
/* 栈的数组实现声明 */ struct StackRecord; typedef struct StackRecord *Stack; #define MinSstackSize 5 #defin ...
- hdu 4619 Warm up 2_最大独立集
三个人整个下午都想不出这题 后来看题解,竟然用匈牙利算法的最大独立集,我顿时晕了. 题意:给竖着和横着的方块,除去重叠的,最多能留下几个方块 #include <cstdlib> #inc ...