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() 方 ...

随机推荐

hbase 二级索引创建
在单机上运行hbase 二级索引: import java.io.IOException; import java.util.HashMap; import java.util.Map; import ...
HDU 1070 - Milk
给每种牛奶价格和量要求买最便宜的牛奶 #include <iostream> using namespace std; int t,n; ][]; ],v[]; int main() { ...
linux学习笔记之线程
线程同步机制:http://www.cnblogs.com/zheng39562/p/4270019.html 一.基础知识 1:基础知识. 1,线程需要的信息有:线程ID,寄存器,栈,调度优先级和策 ...
java+mysql中文乱码问题
乱码问题原因有多种,其中有一种是由于MySQL默认使用 ISO-8859-1 ( 即Latin1 ) 字符集,而JAVA内部使用Unicode编码,因此在JAVA中向MYSQL数据库插入数据时,或者读 ...
【搜索引擎Jediael开发4】V0.01完整代码
截止目前,已完成如下功能: 1.指定某个地址,使用HttpClient下载该网页至本地文件 2.使用HtmlParser解释第1步下载的网页,抽取其中包含的链接信息 3.下载第2步的所有链接指向的网页 ...
java学习：AWT组件和事件处理的笔记(1)--菜单条，菜单，菜单项
菜单放在菜单条里,菜单项放在菜单里1.MenuBar 在java.awt包中,负责创建菜单条,即MenuBar的一个实例,便是一个菜单条. 在Frame类中的setMenuBar(Menu ...
oracle 创建表空间详细介绍
注意点: 1.如果在PL/SQL 等工具里打开的话,直接修改下面的代码中[斜体加粗部分]执行 2.确保路径存在,比如[D:\oracle\oradata\Oracle9i\]也就是你要保存文件的路径存 ...
python学习day12
目录 html结构与标签 css样式 html结构之head <head> 标签用于定义文档的头部,它是所有头部元素的容器.<head> 中的元素可以引用脚本.指示浏览器在 ...
检测android的版本的办法
http://www.cnblogs.com/wzh206/archive/2010/05/02/1726076.html 如何判断Android系统的版本随着Android版本的增多,在不同的版本 ...
读<<代码整洁之道>>的感想
花去了近一周的时间浏览一下这本书.总体感觉这本书写得不错. 我发现自己以前写的代码时多么的糟糕.有很多改进之处... 同时我也发现写出优秀的代码不易.优秀的代码不仅仅易读,并且易修改,易维护,程序易维 ...

HTML5 canvas绘制线条曲线

HTML5 canvas绘制线条曲线的更多相关文章

随机推荐

热门专题