Html5 Canvas渐变与图片实例教程_H5之家 - 中国HTML5教程资源分享第一站

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Html5 - canvas 演示 | 斌果博客</title>
<script type="text/javascript">
  window.onload = function(){
   //获取 canvas 标签并建立图形
   var myCanvas = document.getElementById('myCanvas').getContext("2d");

   //绘制两个矩形
   myCanvas.fillStyle = 'blue';
   myCanvas.fillRect(320, 100, 310, 110);
   myCanvas.fillStyle = 'rgba(0, 0, 0, 0.5)';
   myCanvas.fillRect(280, 80, 310, 110);

   //绘制直线
   myCanvas.lineWidth = 5;//线条宽度
   myCanvas.strokeStyle = 'rgba(0, 0, 225, 1)';//线条颜色
   myCanvas.moveTo(20, 20);//设置起点
    myCanvas.lineTo(50, 50);//设置节点，下同
    myCanvas.lineTo(70, 85);
    myCanvas.lineTo(90, 300);
    myCanvas.lineTo(500, 300);
    myCanvas.lineTo(520, 85);
    myCanvas.lineTo(540, 50);
    myCanvas.lineTo(560, 20);
   myCanvas.stroke();//结束

   //绘制圆形
   myCanvas.fillStyle = "red";//声明颜色
   myCanvas.beginPath();//从新绘制，防止冲突
   myCanvas.arc(200, 200, 60, 0, Math.PI * 2 , true);//绘制
   myCanvas.closePath();//结束，对应 beginPath()
   myCanvas.fill();//结束渲染

   //渐变
   var grd = myCanvas.createLinearGradient(100, 100, 175, 50);
    grd.addColorStop(0, "#FAFAFA");
    grd.addColorStop(0.5, "red");
    grd.addColorStop(0.75, "blue");
    grd.addColorStop(1, "#000");
   myCanvas.fillStyle = grd;
   myCanvas.fillRect(100, 100, 175, 50);

   //插入图形
   var img = new Image();
   img.src = "logo.png";
   myCanvas.drawImage(img, 50, 50);
  }
</script>
<style>
  #myCanvas{border:2px solid #E5E5E5;background:#FAFAFA;}
</style>
</head>
<body>
<canvas id="myCanvas" width="800px" height="400px;">抱歉，您的浏览器不支持此功能，请下载最新版的 Chrome</canvas>
</body>
</html>