<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>canvas</title>

    <script type="text/javascript" src="../js/jQuery.js"></script>

    <style type="text/css">

        *{

            margin: 0;

            padding: 0;

            outline: none;

            border: none;

        }

        #canvas{

            width: 7rem;

            margin: .25rem 0 0 1.5rem;

            border: 1px solid black;

        }

    </style>

</head>

<body>

    <canvas id="canvas" width="1000" height="600"></canvas>

</body>

</html>

<script type="text/javascript">

    /**

     * rem 布局初始化

     */

    $('html').css('font-size', $(window).width()/10);

    /**

     * 获取 canvas 画布

     * 获取 canvas 绘图上下文环境

     */

    var canvas = $('#canvas')[0];

    var cxt = canvas.getContext('2d');

    /**

     * 贝塞尔二次曲线

     * quadraticCurveTo(控制点的横坐标, 控制点的纵坐标, 曲线终点的横坐标, 曲线终点的纵坐标)

     * 贝塞尔三次曲线

     * bezierCurveTo(第一个控制点横坐标, 第一个控制点纵坐标, 第二个控制点横坐标, 第二个控制点纵坐标, 终点横坐标, 终点纵坐标)

     */

    cxt.moveTo(300, 200);

    //cxt.quadraticCurveTo(200, 200, 100, 300);

    cxt.bezierCurveTo(400, 300, 200, 400, 300, 500);

    cxt.strokeStyle = 'red';

    cxt.lineWidth = 5;

    cxt.stroke();

</script>
<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>canvas</title>

    <script type="text/javascript" src="../js/jQuery.js"></script>

    <style type="text/css">

        *{

            margin: 0;

            padding: 0;

            outline: none;

            border: none;

        }

        #canvas{

            width: 7rem;

            margin: .25rem 0 0 1.5rem;

            border: 1px solid black;

        }

    </style>

</head>

<body>

    <canvas id="canvas" width="1000" height="600"></canvas>

</body>

</html>

<script type="text/javascript">

    /**

     * rem 布局初始化

     */

    $('html').css('font-size', $(window).width()/10);

    /**

     * 获取 canvas 画布

     * 获取 canvas 绘图上下文环境

     */

    var canvas = $('#canvas')[0];

    var cxt = canvas.getContext('2d');

    /**

     * 绘制一片星空

     */

    var skyStyle = cxt.createRadialGradient(canvas.width/2, canvas.height, 0, canvas.width/2, canvas.height, canvas.height);

    skyStyle.addColorStop(0.0, '#035');

    skyStyle.addColorStop(1.0, 'black');

    cxt.fillStyle = skyStyle;

    cxt.fillRect(0, 0, canvas.width, canvas.height);

    for(var i = 0; i < 150; i++){

        var fiveStart = {};

        fiveStart.Radius = Math.random()*4+4;

        fiveStart.offsetX = Math.random()*canvas.width;

        fiveStart.offsetY = Math.random()*canvas.height*0.65;

        fiveStart.RotationAngle = Math.random()*360;

        drawFiveStar(cxt, fiveStart);

    }

    fillMoon(cxt, 1, 800, 150, 80, 30);

    drawLand(cxt);

    /**

     * 绘制一片绿地

     */

    function drawLand(cxt){

        cxt.save();

        cxt.beginPath();

        cxt.moveTo(0, 500);

        cxt.bezierCurveTo(540, 300, 660, 600, 1200, 500);

        cxt.lineTo(1200, 600);

        cxt.lineTo(0, 600);

        var LandStyle =  cxt.createLinearGradient(0, 800, 0, 0);

        LandStyle.addColorStop(0.0, "#030");

        LandStyle.addColorStop(1.0, '#580');

        cxt.fillStyle = LandStyle;

        cxt.closePath();

        cxt.fill();

        cxt.restore();

    }

    /**

     * 绘制月亮的方法

     */

    function fillMoon(cxt, d, x, y, R, rot){

        cxt.save();

        cxt.translate(x, y);

        cxt.rotate(rot*Math.PI/180);

        cxt.scale(R, R);

        pathMoon(cxt, d);

        cxt.fillStyle = 'yellow';

        cxt.fill();

        cxt.restore();

    }

    function pathMoon(cxt, d){

        cxt.beginPath();

        cxt.arc(0, 0, 1, 0.5*Math.PI, 1.5*Math.PI, true);

        cxt.moveTo(0, -1);

        cxt.arcTo(d, 0, 0, 1, dis(0, -1, d, 0)/d);

        cxt.closePath();

    }

    function dis(x1, y1, x2, y2){

        return Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));

    }

    /**

     * 控制五角星的方法

     */

    function drawFiveStar(cxt, fiveStart){

        cxt.save();

        cxt.translate(fiveStart.offsetX, fiveStart.offsetY); //相对于原点的偏移量

        cxt.rotate(fiveStart.RotationAngle/180*Math.PI); //图形旋转(弧度)

        cxt.scale(fiveStart.Radius, fiveStart.Radius); //图形缩放( X轴的倍数, Y轴的倍数 )

        fiveStartPath(cxt);

        cxt.fillStyle = "yellow";

        cxt.fill();

        cxt.restore();

    }

    function fiveStartPath(cxt){

        cxt.beginPath();

        var x = 0; y = 0;

        for(var i = 0; i < 5; i++){

            x = Math.cos((18+72*i)/180*Math.PI);

            y = Math.sin((18+72*i)/180*Math.PI);

            cxt.lineTo(x, 0-y);

            x = Math.cos((54+72*i)/180*Math.PI)/2.0;

            y = Math.sin((54+72*i)/180*Math.PI)/2.0;

            cxt.lineTo(x, 0-y);

        }

        cxt.closePath();

    }

</script>

HTML5 Canvas ( 贝塞尔曲线, 一片星空加绿地 ) quadraticCurveTo, bezierCurveTo的更多相关文章

  1. html5 canvas贝塞尔曲线篇(上)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. html5 canvas贝塞尔曲线篇(下)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. canvas贝塞尔曲线

    贝塞尔曲线 Bézier curve(贝塞尔曲线)是应用于二维图形应用程序的数学曲线. 曲线定义:起始点.终止点.控制点.通过调整控制点,贝塞尔曲线的形状会发生变化. 1962年,法国数学家Pierr ...

  4. HTML5 Canvas ( 径向渐变, 升级版的星空 ) fillStyle, createRadialGradient

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. HTML5 Canvas ( 线性渐变, 升级版的星空 ) fillStyle, createLinearGradient, addColorStop

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. HTML5 Canvas ( 图形变换, 升级版的星空 ) translate, rotate, scale

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. canvas贝塞尔曲线 - 2

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAugAAAH7CAIAAAARkv1vAAAgAElEQVR4nOy9e5Ab13ngO7Z37dlsaM

  8. canvas贝塞尔曲线 - 1

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvEAAAIcCAIAAADwgGbqAAAgAElEQVR4nOy9a4wb55nn20kOZhq7o8

  9. canvas ：曲线的面积图 加渐变效果

    document.body.innerHTML = '<canvas></canvas>' var cvs = document.querySelector("can ...

随机推荐

  1. CTF-练习平台-Misc之 图片又隐写

    八.图片又隐写 修改后缀名为zip,打开解压出两个文件 解压发现有密码,用WinHex打开发现文件头是zip的,所以出来把后缀名改为zip,再用工具爆破 最后得到解压密码,解压后是一个图片,改后缀名为 ...

  2. hdu 5185 dp（完全背包）

    BC # 32 1004 题意:要求 n 个数和为 n ,而且后一个数等于前一个数或者等于前一个数加 1 ,问有多少种组合. 其实是一道很水的完全背包,但是没有了 dp 的分类我几乎没有往这边细想,又 ...

  3. GridControl 之 BandedGridView

    https://documentation.devexpress.com/#WindowsForms/clsDevExpressXtraGridViewsBandedGridBandedGridVie ...

  4. mysql常用的聚合函数

    GROUP BY(聚合)函数本章论述了用于一组数值操作的 group (集合)函数.除非另作说明, group 函数会忽略 NULL 值. 假如你在一个不包含 ROUP BY子句的语句中使用一个 gr ...

  5. cacheAsBitmap位图缓存

    使用cacheAsBitmap将缓存显示对象的内部位图表示形式. 此缓存可以提高包含复杂矢量内容的显示对象的性能.此方法适合运用于较多的图片或文字移动,不过也不能太随意乱用,有利必有弊,使用cache ...

  6. dslr control vis usb

    nikon https://sdk.nikonimaging.com/apply/compmail.do Digital-SLR cameras           We are offering L ...

  7. 【转】每天一个linux命令（53）：route命令

    原文网址:http://www.cnblogs.com/peida/archive/2013/03/05/2943698.html Linux系统的route命令用于显示和操作IP路由表(show / ...

  8. Refused to display '[url]' in a frame because it set 'X-Frame-Options' to 'Deny'.

    X-Frame-Options是一个HTTP标头(header),用来告诉浏览器这个网页是否可以放在iFrame内.例如: X-Frame-Options: DENY X-Frame-Options: ...

  9. yii 获取当前模块名、控制器名 、动作名

    yii1 1. 获取控制器名 在控制器中获取控制器名: $name = $this->getId(); 在视图中获取控制器名: $name = Yii::app()->controller ...

  10. linux 标准I/O (二）

    <Uinx 环境高级编程笔记>   以前经常遇到两种I/O操作 一类是f打头的fopen, fread, fwrite 一类是没有f打头的open, read, fwrite 原来一个是U ...