canvas – 老陈是一个普通的文艺二逼青年

HTML5之Canvas（二）——画曲线quadraticCurveTo、bezierCurveTo

2014年2月23日 chen canvas, html5

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
</head>
<body>
    <canvas id="canvas" width="800" height="800"></canvas>
    <script>
        var ctx = canvas.getContext( "2d" ); // 获取画笔

        ctx.beginPath();
        ctx.lineWidth = 2; // 粗细
        ctx.strokeStyle = 'rgb( 200, 200, 200 )';  // 颜色
        ctx.moveTo( 100, 100 );
        ctx.lineTo( 200, 200 );
        ctx.lineTo( 100, 200 );
        ctx.lineTo( 100, 100 );
        ctx.stroke();

        ctx.beginPath();
        // 设置画笔属性
        ctx.lineWidth = 2; // 粗细
        ctx.strokeStyle = 'rgba( 255, 0, 0, 0.5 )';  // 颜色

        // void quadraticCurveTo(in float cpx, in float cpy, in float x, in float y);
        ctx.moveTo( 100, 100 );  // 起始点
        // 二次贝塞尔曲线
        //                    控制点     结尾点  
        ctx.quadraticCurveTo( 200, 200, 100, 200 );

        // 渲染
        ctx.stroke();

        ctx.beginPath();
        ctx.lineWidth = 2; // 粗细
        ctx.strokeStyle = 'rgba( 255, 0, 0, 0.5 )';  // 颜色

        ctx.moveTo( 400, 200 );  // 起始点
        // void bezierCurveTo(in float cp1x, in float cp1y, in float cp2x, in float cp2y, in float x, in float y);
        // 三次贝塞尔曲线
        //                第一控制点 第二控制点 结束点
        ctx.bezierCurveTo( 600, 200, 600, 400, 400, 400 );

        ctx.stroke();
    </script>
</body>
</html>

<!doctype html>

<head>

<title>Canvas</title>

</head>

<body>

var ctx = canvas.getContext( "2d" ); // 获取画笔

ctx.beginPath();

ctx.lineWidth = 2; // 粗细

ctx.strokeStyle = 'rgb( 200, 200, 200 )'; // 颜色

ctx.moveTo( 100, 100 );

ctx.lineTo( 200, 200 );

ctx.lineTo( 100, 200 );

ctx.lineTo( 100, 100 );

ctx.stroke();

ctx.beginPath();

// 设置画笔属性

ctx.lineWidth = 2; // 粗细

ctx.strokeStyle = 'rgba( 255, 0, 0, 0.5 )'; // 颜色

// void quadraticCurveTo(in float cpx, in float cpy, in float x, in float y);

ctx.moveTo( 100, 100 ); // 起始点

// 二次贝塞尔曲线

// 控制点结尾点

ctx.quadraticCurveTo( 200, 200, 100, 200 );

// 渲染

ctx.stroke();

ctx.beginPath();

ctx.lineWidth = 2; // 粗细

ctx.strokeStyle = 'rgba( 255, 0, 0, 0.5 )'; // 颜色

ctx.moveTo( 400, 200 ); // 起始点

// void bezierCurveTo(in float cp1x, in float cp1y, in float cp2x, in float cp2y, in float x, in float y);

// 三次贝塞尔曲线

// 第一控制点第二控制点结束点

ctx.bezierCurveTo( 600, 200, 600, 400, 400, 400 );

ctx.stroke();

</script>

</body>

</html>

测试连接

HTML5之Canvas（二）——画曲线arc、arcTo

2014年2月23日2014年2月23日 chen canvas, html5

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
</head>
<body>
    <canvas id="canvas" width="800" height="800"></canvas>
    <script>
        var ctx = canvas.getContext( "2d" ); // 获取画笔

        // 设置画笔属性
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'rgba( 255, 0, 0, 0.5 )';  // 线颜色
        ctx.fillStyle =  'rgba( 255, 0, 0, 0.5 )';  // 填充颜色

        // void arc(in float x, in float y, in float radius, in float startAngle, in float endAngle, in boolean anticlockwise);
        //       圆心X  圆心Y 半径 起始点  结束点  顺/逆时针 
        ctx.arc( 300, 300, 200, 0, Math.PI * 2 / 4, 1 );
        ctx.fill(); // 填充

        // void arcTo(in float x1, in float y1, in float x2, in float y2, in float radius);
        ctx.moveTo( 400, 100 );
        ctx.arcTo( 700, 100, 600, 200, 50 );

        ctx.stroke();   // 滑线
    </script>
</body>
</html>

<!doctype html>

<head>

<title>Canvas</title>

</head>

<body>

var ctx = canvas.getContext( "2d" ); // 获取画笔

// 设置画笔属性

ctx.lineWidth = 2;

ctx.strokeStyle = 'rgba( 255, 0, 0, 0.5 )'; // 线颜色

ctx.fillStyle = 'rgba( 255, 0, 0, 0.5 )'; // 填充颜色

// void arc(in float x, in float y, in float radius, in float startAngle, in float endAngle, in boolean anticlockwise);

// 圆心X 圆心Y 半径起始点结束点顺/逆时针

ctx.arc( 300, 300, 200, 0, Math.PI * 2 / 4, 1 );

ctx.fill(); // 填充

// void arcTo(in float x1, in float y1, in float x2, in float y2, in float radius);

ctx.moveTo( 400, 100 );

ctx.arcTo( 700, 100, 600, 200, 50 );

ctx.stroke(); // 滑线

</script>

</body>

</html>

测试连接参考：http:// […]

HTML5之Canvas（一）——画起来

2014年2月23日2014年2月23日 chen canvas, html5

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        var ctx = canvas.getContext( "2d" ); // 获取画笔

        // 画图
        ctx.moveTo( 10, 10 );
        ctx.lineTo( 110, 10 );
        ctx.lineTo( 110, 110 );
        ctx.lineTo( 10, 110 );
        ctx.lineTo( 10, 10 );

        ctx.moveTo( 150, 10 );
        ctx.lineTo( 150, 100 );

        // 设置画笔属性
        ctx.lineWidth = 10; // 粗细
        ctx.lineJoin = 'round';  
        // lineJoin，意思即线的交汇处，有3个属性：miter(默认，尖角)，bevel（斜角）,round（圆角）
        ctx.lineCap = 'round'; 
        //即lineCap属性，这个就是定义线条的端点。lineCap有3个值：butt（平，默认）,round（圆）,square（方）
        ctx.strokeStyle = 'rgba( 255, 0, 0, 0.5 )';  // 颜色
        // ctx.closePath();  // 闭合路径

        // 渲染
        ctx.stroke();
    </script>
</body>
</html>

<!doctype html>

<head>

<title>Canvas</title>

</head>

<body>

var ctx = canvas.getContext( "2d" ); // 获取画笔

// 画图

ctx.moveTo( 10, 10 );

ctx.lineTo( 110, 10 );

ctx.lineTo( 110, 110 );

ctx.lineTo( 10, 110 );

ctx.lineTo( 10, 10 );

ctx.moveTo( 150, 10 );

ctx.lineTo( 150, 100 );

// 设置画笔属性

ctx.lineWidth = 10; // 粗细

ctx.lineJoin = 'round';

// lineJoin，意思即线的交汇处，有3个属性：miter(默认，尖角)，bevel（斜角）,round（圆角）

ctx.lineCap = 'round';

//即lineCap属性，这个就是定义线条的端点。lineCap有3个值：butt（平，默认）,round（圆）,square（方）

ctx.strokeStyle = 'rgba( 255, 0, 0, 0.5 )'; // 颜色

// ctx.closePath(); // 闭合路径

// 渲染

ctx.stroke();

</script>

</body>

</html>

[crayon-5e8b0bdac26643 […]