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

随机推荐

UIImageView~动画播放的内存优化
我目前学到的知识,播放动画的步骤就是下面的几个步骤,把照片资源放到数组里面,通过动画animationImage加载数组,设置动画播放的时间和次数完成播放. 后来通过看一些视频了解到:当需要播放多个 ...
JavaScript事件属性绑定带参数的函数
JavaScript中在对事件进行绑定的时候,往往是element.onclick=event;这种形式,这样使用的话则会出现无法传参数.因此我们可以使用function(){}匿名函数将事件包含其中 ...
初始seajs
SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制 SeaJS本身遵循KISS(Keep It Simple, Stupid ...
代码设置layout_weight attribute
代码设置 LinearLayout权重比例之小结: 如果在LinearLayout添加子View,那么只有一个View的时候设置所占的比例一定要设置LinearLayout总weightsum.不然会 ...
注册表添加python
win(python2.7)下: 执行此文件 #!/usr/bin/env python # encoding:utf-8 # # script to register Python 2.0 or l ...
Django学习(四) Django提供的后台管理系统以及如何定义URL路由
一旦你建立了模型Models,那么Django就可以为你创建一个专业的,可以提供给生成用的后台管理站点.这个站点可以提供给有权限的人进行已有模型Models数据的增删改查. 将新建的模型Models是 ...
如何：对 Web 窗体使用路由
配置用于路由的 ASP.NET 网站项目 1. 在应用程序的 Web.config 文件中,将 ASP.NET 路由程序集添加到 assemblies 元素,如下面的示例所示: <add ass ...
環氧樹脂對COB的影響
COB的封膠一般使用單液 Epoxy(環氧樹脂),也可以使用雙液(Epoxy+硬化劑),雙液的成品品質可靠度雖然比較高,但是保存及維護非常麻煩,所以一般的 COB 都還是採用單液的製程. 其次是如何控 ...
Delphi获取系统服务描述信息
program Project1; {$APPTYPE CONSOLE} uses Windows, WinSvc; type SERVICE_DESCRIPTION = packed record ...
在WPF中自定义你的绘制（四）
原文:在WPF中自定义你的绘制(四) 在WPF中自定义你的绘制(四) ...

HTML5 canvas绘制线条曲线

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

随机推荐

热门专题