美文网首页
canvas学习

canvas学习

作者: 田野的海螺 | 来源:发表于2018-12-27 15:56 被阅读0次

    1.创建画布:

    <canvas id="myCanvas" width="500" height="550" style={{ border: '1px solid #ddd' }}> 您的浏览器不支持 HTML5 canvas 标签。 </canvas>

    创建canvas元素

    2.画线条

    const canvas = document.getElementById("myCanvas");////获得画布元素

        if (canvas.getContext) {

          const ctx = canvas.getContext("2d");//获得2维绘图的上下文2d: 表示2维experimental-webgl: 表示试验版3维 webgl:表示3维

          ctx.lineWidth = 10;//设置线宽

          ctx.strokeStyle = "red"; //设置线的颜色

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

          ctx.lineTo(300, 300);//终点

          ctx.moveTo(0, 100);

          ctx.lineTo(100, 0);

          ctx.stroke(); //执行画线

        }

    图示:

    直线图

    3.写文字

    const ctx = canvas.getContext("2d");//获得2维绘图的上下文2d: 表示2维experimental-webgl: 表示试验版3维 webgl:表示3维

          //设置线宽

          ctx.lineWidth = 1;

          //设置线的颜色

          ctx.strokeStyle = "red";

          ctx.moveTo(0, 0);

          ctx.strokeRect(0, 0, 600, 600);

          ctx.font = "50px microsoft yahei";

          ctx.strokeText("你好,我是懒懒", 20, 100);//描边文字

          //填充

          ctx.fillStyle =ctx.fillText("你好,我是懒懒", 20, 200);//填充文字

    context.fillText(text,x,y,[maxWidth])

    text表示需要绘制的文字,x,y分别表示绘制在canvas上的横,纵坐标,最后一个参数可选,表示显示文字的最大宽度,防止文字显示溢出。

    4,画三角形

    const ctx = canvas.getContext("2d");//获得2维绘图的上下文2d: 表示2维experimental-webgl: 表示试验版3维 webgl:表示3维

          ctx.beginPath();  //清空子路径,一般用于开始路径的创建

          ctx.strokeStyle = "red";

          ctx.moveTo(300,300);

          ctx.lineTo(100,100);  //画线到0,300的位置

          ctx.lineTo(200,400);  //画线到右下角

          ctx.closePath();  //闭合

          //ctx.stroke();  //执行描边

          ctx.fillStyle="red";  //设置填充颜色

          ctx.fill();  //执行填充

    4,画矩形

    ctx.fillRect(x, y, width, height);//ctx.fillRect(10, 10, 250, 70);

    相关文章

      网友评论

          本文标题:canvas学习

          本文链接:https://www.haomeiwen.com/subject/buvrlqtx.html