canvas-绘制路径

最新推荐文章于 2024-04-08 20:58:26 发布

wyn314

最新推荐文章于 2024-04-08 20:58:26 发布

阅读量405

点赞数

分类专栏： HTML5 文章标签： canvas 绘制路径

本文链接：https://blog.csdn.net/csdnwyn314/article/details/78283704

版权

HTML5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1. 绘制简单路径

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h1>学习canvas</h1>
<canvas id="canvasTest1" height="300" width="500"></canvas>
<canvas id="canvasTest2" height="300" width="500"></canvas>
<canvas id="canvasTest3" height="300" width="500"></canvas>
<canvas id="canvasTest4" height="300" width="500"></canvas>
<canvas id="canvasTest5" height="300" width="500"></canvas>




<script type="text/javascript">
    function drawLine(id) {
        var canvas = document.getElementById(id);
        if(canvas === null){
            return false;
        }
        var context = canvas.getContext('2d');
        context.fillStyle='#EEEEFF';
        context.fillRect(0,0,500,300);
        context.beginPath();
        context.lineWidth = 10;
        context.lineCap = 'round';
        context.moveTo(20,20);  // 指定起点
        context.lineTo(20,200);  // 指定终点
        context.stroke();
    }
    drawLine('canvasTest1');

    function drawLine2(id) {
        var canvas = document.getElementById(id);
        if(canvas === null){
            return false;
        }
        var context = canvas.getContext('2d');
        context.fillStyle='#EEEEFF';
        context.fillRect(0,0,500,300);
        context.beginPath();
        context.lineWidth = 10;
        context.lineJoin = 'round';
        context.moveTo(20,20);  // 指定起点
        context.lineTo(20,200);  // 指定终点
        context.lineTo(200,200);  // 指定终点
        context.stroke();
    }
    drawLine2('canvasTest2');

    function drawLine3(id) {
        var canvas = document.getElementById(id);
        if(canvas === null){
            return false;
        }
        var context = canvas.getContext('2d');
        context.fillStyle='#EEEEFF';
        context.fillRect(0,0,500,300);
        context.beginPath();
        context.lineWidth = 5;
        context.setLineDash([5]);
        context.moveTo(20,20);  // 指定起点
        context.lineTo(20,200);  // 指定终点
        context.lineTo(200,200);  // 指定终点
        context.stroke();
    }
    drawLine3('canvasTest3');

    function drawLine4(id) {
        var canvas = document.getElementById(id);
        if(canvas === null){
            return false;
        }
        var context = canvas.getContext('2d');
        context.fillStyle='#EEEEFF';
        context.fillRect(0,0,500,300);
        context.beginPath();
        context.moveTo(150,20);  // 指定起点
        context.lineWidth = 5;
        context.arcTo(150,100,50,20,30);
        context.stroke();
    }
    drawLine4('canvasTest4');

    function drawLine5(id) {
        var canvas = document.getElementById(id);
        if(canvas === null){
            return false;
        }
        var context = canvas.getContext('2d');
        context.fillStyle='#EEEEFF';
        context.fillRect(0,0,500,300);
        var n=0;
        var dx = 150;
        var dy = 150;
        var s = 100;
        context.beginPath();
        context.globalCompositeOperation = 'and';
        context.fillStyle = 'rgb(100,255,100)';
        var x = Math.sin(0);
        var y = Math.cos(0);
        var dig = Math.PI / 15 *11;
        context.moveTo(dx,dy);
        for(var i=0; i<30; i++){
            var x = Math.sin(i*dig);
            var y = Math.cos(i*dig);
            context.bezierCurveTo(dx + x*s,dy + y*s - 100, dx + x*s + 100,dy + y*s, dx + x*s,dy + y*s);
        }
        context.closePath();
        context.fill();
        context.stroke();
    }
    drawLine5('canvasTest5');
</script>
</body>
</html>

wyn314

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas-绘制路径

1. 绘制简单路径<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><h1>学习canvas</h1><canvas id="canvasTest1" height="300" width="500"></canvas><canvas id="
复制链接

扫一扫

专栏目录