cnavas

1.创建一个画布eg:<cnavas width=100px;height=100px; style="border:1px solid rgba(242 ,54,33,0.1)"></canvas>

2.绘制图像eg：

<canvas width=100px;height=100px;style="border:2px double #000" id="canvas"></canvas>

                     <script>

                     var a=document.getElementById("canvas");

                      var b=a.getContext("2d");

                      b.fillStyle="#000";

                     b.fillRect(0,0,30,40);

                    <script>

3.Canvas的路径：

<canvas width="100" height="200" style="border:1 double 000 " ></canvas>
<script>
var a=document.getElementById("canvas");
var b=a.getcontext("2d");
b.moveTo=(0,0);
b.lineTo(10,20);
</script>

4.canvas画圆

ctx.beginPath();

ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

5.Canvas - 文本项：

使用 canvas 绘制文本，重要的属性和方法如下：

• font - 定义字体
• fillText(text,x,y) - 在 canvas 上绘制实心的文本
• strokeText(text,x,y) - 在 canvas 上绘制空心的文本

  var a=document.getElementById("myCanvas");
  var b=a.getContext("2d");
  b.font="30px Arial";
  b.fillText("Hello World",20,50);

6.canvas-j渐变色