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++多重继承中this指针的变化
先来看一下下面的c++源码: #include <iostream> using namespace std; class X { public: virtual void print1( ...
Spring容器关于继承的应用案例
一:案例演示 1.1.spring的配置文件applicationContext-extends.xml 1.2.业务类:CommonDao.java,PersonDao.java --------- ...
智能电视TV开发---如何实现程序省电
对于很多使用智能手机的用户来,很多抱怨手机耗电太快,很多人买手机的时候卖家都是推荐买两块电池,还有如果用户留心的话,在买手机的网页上,卖家会显示播放视频多长时间,听音乐多长时间,待机多长时间,不过看的 ...
jdbc之二：DAO模式
详细代码请参见 https://code.csdn.net/jediael_lu/daopattern 1.创建Dao接口. package com.ljh.jasonnews.server.dao; ...
oracle 使用基本问题
Oracle服务端口号:1521Database Control URL : http://XXX:1158/em oracle主目录:X:\oracle\product\10.2.0\db_1/** ...
微信OPENID授权方法
今天搞了下微信授权, 总结了下微信的授权规则与步骤先来几个关键字 Openid 微信ip(属于唯一指向公众号的id) redirect_uri 授权回调地址 State 回调地址带参数 Appi ...
mac osx 10.9 ftp server端口
开启 FTP Serversudo -s launchctl load -w /System/Library/LaunchDaemons/ftp.plist 关闭 FTP Serversudo -s ...
centos出现磁盘坏掉，怎么修复和检测。
当dmesg的时候,出现下面的信息说明磁盘有问题 Info fld=0x139066d0 end_request: I/O error, dev sda, sector 328230608 Buffe ...
Doubles water！！！！！！只会水题怎么破
Doubles Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Sub ...
IBM Minus One(water)
IBM Minus One Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tot ...

HTML5 canvas绘制线条曲线

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

随机推荐

热门专题