canvas1

这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。

 //获取canvas节点 canvas颜色为透明色
 var canvas=document.getElementById("canvas1");
 //获取canvas画布上下文
 var context=canvas.getContext("2d");
//新建一个路径
context.beginPath();
//移动画笔开始画的位置
context.moveTo(0,0);
context.lineTo(250,250)
//设置颜色
context.strokeStyle="red";
//设置线的宽度
context.lineWidth=20;
//将图层渲染到画布上
context.stroke();

canvas画圆

  cont.arc(300,300,100,0,2*Math.PI);
  cont.fillStyle="red";
  cont.fill();

canvas画矩形

  arr=["red","greenyellow","cyan","lightgray"];
  for(var i=0;i<arr.length;i++){
    var num=20*i;
    cont.fillStyle=arr[i];
    cont.fillRect(num,num,200,100); 
  }

909C3DD7-0487-4A7A-B2C4-82B0A331D2C4.png

对字体设置阴影

  var text="HELLO WORLD";
    cont.font="italic 50px serif";
    var gradient=cont.createLinearGradient(100,0,400,0);
    gradient.addColorStop("0","blue");
    gradient.addColorStop("0.5","green");
    gradient.addColorStop("1","red");
    cont.strokeStyle=gradient;
    cont.strokeText(text,100,100);   

143B1A9B-2C2F-49AC-960C-A0F086E74DCF.png