html5之快速上手canvas

最新推荐文章于 2023-03-07 17:53:20 发布

Xingmahao_

最新推荐文章于 2023-03-07 17:53:20 发布

阅读量202

点赞数

分类专栏： web 文章标签： canvas

本文链接：https://blog.csdn.net/Xingmahao_/article/details/103499332

版权

web 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一、Canvas绘制线条

Context对象的beginPath方法表示开始绘制路径，moveTo(x, y)方法设置线段的起点，lineTo(x, y)方法设置线段的终点，stroke方法用来给透明的线段着色。moveto和lineto方法可以多次使用。最后，还可以使用closePath方法，自动绘制一条当前点到起点的直线，形成一个封闭图形，省却使用一次lineto方法;

<body>
    <canvas id="demoCanvas" width="500" height="600"></canvas>
    <script type="text/javascript">
       //通过id获得当前的Canvas对象
       var canvasDom = document.getElementById("demoCanvas");
       //通过Canvas Dom对象获取Context的对象
       var context = canvasDom.getContext("2d");
       context.beginPath(); // 开始路径绘制
       context.moveTo(20, 20); // 设置路径起点，坐标为(20,20)
       context.lineTo(200, 200); // 绘制一条到(200,20)的直线
       context.lineTo(400, 20);
       context.closePath();
       context.lineWidth = 2.0; // 设置线宽
       context.strokeStyle = "#CC0000"; // 设置线的颜色
       context.stroke(); // 进行线的着色，这时整条线才变得可见
    </script>
</body>

二、Canvas绘制文本

Context上下文对象的fillText(string, x, y)方法是用来绘制文本，它的三个参数分别为文本内容、起点的x坐标、y坐标。使用之前，需用font设置字体、大小、样式（写法类似与CSS的font属性）。与此类似的还有strokeText方法，用来添加空心字。另外注意一点：fillText方法不支持文本断行，即所有文本出现在一行内。所以，如果要生成多行文本，只有调用多次fillText方法。

<body>
    <canvas id="demoCanvas" width="500" height="600"></canvas>
    <script type="text/javascript">
       //通过id获得当前的Canvas对象
       var canvasDom = document.getElementById("demoCanvas");
       //通过Canvas Dom对象获取Context的对象
       var context = canvasDom.getContext("2d");
       context.moveTo(200,200);
            
       // 设置字体
       context.font = "Bold 50px Arial";
       // 设置对齐方式
       context.textAlign = "left";
       // 设置填充颜色
       context.fillStyle = "#005600";
       // 设置字体内容，以及在画布上的位置
       context.fillText("Xingmahao!", 10, 50);
       // 绘制空心字
       context.strokeText("前端html5之canvas快速上手!", 10, 100);
    </script>
</body>

三、Canvas绘制圆形和椭圆

Context上下文的arc方法就是绘制圆形或者椭圆，arc方法的x和y参数是圆心坐标，radius是半径，startAngle和endAngle则是扇形的起始角度和终止角度（以弧度表示），anticlockwise表示做图时应该逆时针画（true）还是顺时针画（false）。

<body>
    <canvas id="demoCanvas" width="500" height="600"></canvas>
    <script type="text/javascript">
        //通过id获得当前的Canvas对象
        var canvasDom = document.getElementById("demoCanvas");
        //通过Canvas Dom对象获取Context的对象
        var context = canvasDom.getContext("2d");
        context.beginPath(); //开始绘制路径
        //绘制以 （60,60）为圆心，50为半径长度，从0度到360度（PI是180度），最后一个参数代表顺时针旋转。
        context.arc(60, 60, 50, 0, Math.PI * 2, true);
        context.lineWidth = 2.0; //线的宽度
        context.strokeStyle = "#000"; //线的样式
        context.stroke(); //绘制空心的，当然如果使用fill那就是填充了。
    </script>
</body>

四、Canvas绘制图片

Canvas绘制图片应该是他的一大特点或者是亮点吧。当然配合File的API，让JS变得无可匹敌。那接下里给大家演示一下怎样绘制图片，并且做出一个立体效果出来。

<body>
    <canvas id="demoCanvas" width="500" height="600"></canvas>
    <script type="text/javascript">
        //通过id获得当前的Canvas对象
        var canvasDom = document.getElementById("demoCanvas");
        //通过Canvas Dom对象获取Context的对象
        var context = canvasDom.getContext("2d");
        var image = new Image(); //创建一张图片
        image.src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576085820839&di=156720809823a080e53a1d0d9844c5d3&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D2014781610%2C1621688736%26fm%3D214%26gp%3D0.jpg'
        image.onload = function () { //当图片加载完成后
            for (var i = 0; i < 10; i++) { //输出10张照片
                //参数：（1）绘制的图片  （2）坐标x，（3）坐标y
                context.drawImage(image, 100 + i * 80, 100 + i * 80);
            }
        };
    </script>
</body>

Xingmahao_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5之快速上手canvas

一、Canvas绘制线条Context对象的beginPath方法表示开始绘制路径，moveTo(x, y)方法设置线段的起点，lineTo(x, y)方法设置线段的终点，stroke方法用来给透明的线段着色。moveto和lineto方法可以多次使用。最后，还可以使用closePath方法，自动绘制一条当前点到起点的直线，形成一个封闭图形，省却使用一次lineto方法;<body...
复制链接

扫一扫