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>
时间: 2024-10-13 16:10:04

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

使用html5 Canvas绘制线条(直线、折线等)

使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeStyle 用于设置画笔绘制路径的颜色.渐变和模式.该属性的值可以是一个表示css颜色值的字符串.如果你的绘制需求比较复杂,该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象 globalAlpha 定义绘制内容的透明度,取值在0.0(完全透明)和1.0(完全不透明)之间,默认

html5 Canvas绘制图形入门详解

html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome.Opera.Safari.IE9+)都已经开始支持html5了.除此之外,在移动浏览器市场上,众多的移动浏览器也纷纷展开关于「html5的支持能力以及性能表现」的军备竞赛.html作为革命性的网页技术标准,再加上众多浏览器厂商或组织的鼎力支持,可以想见,html5将会成为未来网页技术的领头羊. ht

html5 canvas绘图-贝塞尔曲线

贝塞尔曲线(ezier curve)最迟是由法国物理学家与数学家paul de Casteljau发明的.它的广泛运用则要归功于法国工程师皮埃尔 贝塞尔 贝塞尔曲线期初被用在汽车车身的设计上.现在则多用于计算机图形系统中.例如Adobe Illustrator/Apple的Cocoa框架以及在Html5的canvas. 贝塞尔曲线分为两种:平方(quadratic)贝塞尔曲线及立方(cubic)贝塞尔曲线.平方贝塞尔曲线是一种二次曲线(second degree curve),意思就是说,它们是

HTML5 Canvas绘制实时时钟

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>try to draw the colock</title> <script src="js/modernizr-1.7.js"></script> <script type="text/javascript"> wind

学习笔记:HTML5 Canvas绘制简单图形

HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" width="1024" style="border:1px solid #aaa;text-align:center;"> 你的浏览器不支持Canvas,请更新浏览器再试!!! </canvas> 在canvas标签之间应该做浏览器是否支持的检测,

使用html5 canvas绘制圆形或弧线

注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链接以了解使用html5 canvas绘制图形的完整内容. 在html5中,CanvasRenderingContext2D对象也提供了专门用于绘制圆形或弧线的方法,请参考以下属性和方法介绍: arc(x, y, radius, startRad, endRad, anticlockwise) 在canvas画

Html5 canvas 绘制彩票走势图

因需要 要实现一个类似彩票走势图的功能,初次学Html5 ,很多地方不明白,前段时间也发帖请教过这个问题,也是没给个明确说话,在网上搜了很多,也没有实现的例子,今天仔细研究了下,发现其实也不是很难,现将代码贴出来,共同学习! 先来一张效果图: 实现的代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <me

canvas绘制贝塞尔曲线

原文:canvas绘制贝塞尔曲线 1.绘制二次方贝塞尔曲线 quadraticCurveTo(cp1x,cp1y,x,y); 其中参数cp1x和cp1y是控制点的坐标,x和y是终点坐标 数学公式表示如下: 二次方贝兹曲线的路径由给定点P0.P1.P2的函数B(t)追踪: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <

使用 HTML5 Canvas 绘制出惊艳的水滴效果

HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作,具有极大的应用价值. 这里分享一个惊艳的 Canvas 水滴效果,双击可以把水滴分离:拖放到一起可以融合:晃动浏览器可以让水滴跳动:键盘左右键可以切换皮肤:上下键可以变换大小. 在线演示      插件下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊