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

随机推荐

iOS 事件处理机制与图像渲染过程
Peter在开发公众号功能时触发了一个bug,导致群发错误.对此我们深表歉意,并果断开除了Peter.以下交回给正文时间: iOS 事件处理机制与图像渲染过程 iOS RunLoop都干了什么 iOS ...
TableLayout属性
整理于http://naotu.baidu.com/file/e5880b84b1a906838116f7a45f58de78
C#与SQLite数据库
1.添加引用 System.Data.SQLite.dll 2.using System.Data.SQLite; 3.原理步骤: string path = "c:\\mydb.db&qu ...
golang Date format
package main import ( "fmt" "time" ) // @link https://golang.org/pkg/time/ func ...
【搜索引擎Jediael开发4】V0.01完整代码
截止目前,已完成如下功能: 1.指定某个地址,使用HttpClient下载该网页至本地文件 2.使用HtmlParser解释第1步下载的网页,抽取其中包含的链接信息 3.下载第2步的所有链接指向的网页 ...
认识JSONP
jsonp 全称是JSON with Padding 我们大家都知道ajax是不能发起跨域请求,现在可以通过jsonp来弥补ajax的这一缺陷通过script标签的src属性就可以实现跨域请求.如( ...
SharePoint 2013 实战碎嘴（ECMAScript客户端对象模型）：提示某个列表不存在
简单情景描述1:(在Sharepoint 2013 Solution 中) 在相应的.aspx页面引入一下两个.js文件: <script type="text/javascript ...
jQuery图片懒加载lazyload插件
http://www.neoease.com/lazy-load-jquery-plugin-delay-load-image/ js 模板引擎
Window10安装TestLink，以及登录mysql数据库的错误处理
步骤一: 需要安装apache和mysql,但是我们这里仅仅是使用testlink,不关注其他,所以使用Vertrigoserv进行傻瓜式安装,安装完后,下载testlink解压,将解压后的文件放入D ...
什么是Intent(意图)
1.Intent是一种运行时绑定(runtime bingding)机制,它能在程序运行的过程中连接两个不同的组件.通过Intent,你的程序可以向Android表达某种请求或者意愿,Android ...

HTML5 canvas绘制线条曲线

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

随机推荐

热门专题