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

随机推荐

C#调用SAPWebService
其实和调用其它WebService 没有很大不同只是不了解SAP的人可能不太明白 SAP接口中的相关参数 //调用接口 , 创建对象 ServiceReference1.Z_IF_MM_VEND ...
css基础之联网使用bootstrap
在<head></head>中添加 <meta charset="utf-8"> <meta http-equiv="X-UA- ...
Mysql优化之创建高性能索引(三)
聚蔟索引聚蔟索引并不是一种单独的索引类型,而是一种数据存储方式.Innodb的聚蔟索引在同一结构保存了B-Tree索引和数据行. 当表有聚蔟索引时,它的数据行实际上存放在索引的叶子页中.下图展示了聚 ...
locate命令的安装
linux中locate命令可以快速定位我们需要查找的文件,但是在yum中,locate的安装包名为mlocate(yum list | grep locate可以查看),安装方法: yum -y i ...
Objective-C实现计算你写了多少行代码
#import <Foundation/Foundation.h> NSInteger codeLineCount(NSString *path) { //1.获取文件管理者,这是一个单例 ...
Jquery基础之事件操作
事件是用户操作时页面或页面加载时引发的用来完成javascript和HTML之间的交互操作.常见的元素点击事件.鼠标事件.键盘输入事件等,较传Javascript 相比JQuery增加并扩展了基本的事 ...
10年程序员谈.Net程序员的职业规划(图/文)
原文地址:http://bbs.csdn.net/topics/390736769 从事Dotnet程序开发工作近10年了,从开始的月薪3k的小程序员菜鸟,到现在年薪60w的项目总经理,从战战兢兢的去 ...
ID3算法决策树 C++实现
人工智能课的实验. 数据结构:多叉树这个实验我写了好久,开始的时候从数据的读入和表示入手,写到递归建树的部分时遇到了瓶颈,更新样例集和属性集的办法过于繁琐: 于是参考网上的代码后重新写,建立决策树类 ...
EF框架+Lamada表达式（联合多表lamada表达式的用法）
有俩张表对应的EF框架的类Reviews和Commodity_Review,新建一个新的类,字段是联合俩张表后自己需要展示的字段ReviewsShow IQueryable<ReviewsSho ...
ReactNative setNativeProps
在封装原生组件的过程,如果我们希望在reactnative中触发原生的属性,但是又不需要暴露在reactnative的组件中. 那么我们就要用到setNativeProps这个方法,这个方法会直接触发 ...

HTML5 canvas绘制线条曲线

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

随机推荐

热门专题