码迷,mamicode.com
首页 > 编程语言 > 详细

[Javascript] Drawing Paths - Curves and Arcs

时间:2015-03-19 23:36:23      阅读:452      评论:0      收藏:0      [点我收藏+]

标签:

window.onload = function() {

    var canvas = document.getElementById("canvas"),
        context = canvas.getContext("2d");

    context.beginPath();
    context.moveTo(0,300);

    for(var x = 1; x < 300; x++){
        var y = 300 + Math.sin(x * 0.02) *100;
        context.lineTo(x,y);
    }

    context.stroke();
};

技术分享

 

quadraticCurveTo() & bezierCurveTo():

技术分享 技术分享

window.onload = function() {

    var canvas = document.getElementById("canvas"),
        context = canvas.getContext("2d");

    var p0 = {
        x: Math.random() * 600,
        y: Math.random() * 600
    };

    var p1 = {
        x: Math.random() * 600,
        y: Math.random() * 600
    };

    var p2 = {
        x: Math.random() * 600,
        y: Math.random() * 600
    };

    context.beginPath();
    context.moveTo(p0.x, p0.y);
    context.quadraticCurveTo(p1.x, p1.y, p2.x, p2.y);
    context.stroke();
    context.closePath();

    drawPoint(p0);
    drawPoint(p1);
    drawPoint(p2);

    function drawPoint(p) {
        context.fillRect(p.x - 4, p.y - 4, 8, 8);
    }

};

技术分享

 

 

window.onload = function() {

    var canvas = document.getElementById("canvas"),
        context = canvas.getContext("2d");

    var p0 = {
        x: Math.random() * 600,
        y: Math.random() * 600
    };

    var p1 = {
        x: Math.random() * 600,
        y: Math.random() * 600
    };

    var p2 = {
        x: Math.random() * 600,
        y: Math.random() * 600
    };

    var p3 = {
        x: Math.random() * 600,
        y: Math.random() * 600
    };

    context.beginPath();
    context.moveTo(p0.x, p0.y);
    context.bezierCurveTo( p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);
    context.stroke();
    context.closePath();

    drawPoint(p0);
    drawPoint(p1);
    drawPoint(p2);
    drawPoint(p3);

    function drawPoint(p) {
        context.fillRect(p.x - 4, p.y - 4, 8, 8);
    }

};

技术分享

 

 

技术分享

window.onload = function() {

    var canvas = document.getElementById("canvas"),
        context = canvas.getContext("2d");

    context.beginPath();
    context.arc(200,200,100,0,2);
    context.stroke();
    context.closePath();

    context.beginPath();
    context.arc(400,400,100,0,2, true);
    context.stroke();
    context.closePath();

};

技术分享

 

window.onload = function() {

    var canvas = document.getElementById("canvas"),
        context = canvas.getContext("2d");

    context.beginPath();
    context.arc(300,300,100,0, Math.PI * 2);
    context.stroke();
    context.closePath();

};

技术分享

 

[Javascript] Drawing Paths - Curves and Arcs

标签:

原文地址:http://www.cnblogs.com/Answer1215/p/4351918.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!