canvas--操作步骤--属性 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>01canvas入门</title>
</head>
<body>
<canvas id='demo' width="600" height="600">
    你的浏览器不支持canvas，请升级浏览器.浏览器不支持，显示此行文本
</canvas>

<script>
    var canvas = document.getElementById('demo');
    canvas.style.border = '1px solid red';
    var ctx = canvas.getContext('2d');
    //ctx.beginPath();
    ctx.moveTo(100,100);
    ctx.lineTo(300,100);
    ctx.lineTo(300,300);
    //设置线条的宽度
    ctx.lineWidth = 4;
    //设置线条的颜色
    ctx.strokeStyle = 'red';
    ctx.closePath();//封口，衔接到初始位置
    //填充
    ctx.fill();//默认黑色-ctx.fileStyle = 'green';
    ctx.stroke()
</script>

</body>
</html>

canvas 绘制的基本步骤：

  • 第一步：获得上下文 =>canvasElem.getContext('2d');
  • 第二步：开始路径规划 =>ctx.beginPath()
  • 第三步：移动起始点 =>ctx.moveTo(x, y)
  • 第四步：绘制线(矩形、圆形、图片...) =>ctx.lineTo(x, y)
  • 第五步：闭合路径 =>ctx.closePath();
  • 第六步：绘制描边 =>ctx.stroke();
posted @ 2019-09-08 21:57  小白咚  阅读(587)  评论(0)  编辑  收藏  举报