canvas学习笔记一 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
  <script type="application/javascript">
    function draw() {
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");//此处建立一个脚本绘画环境 然后开始绘制图形。

        ctx.fillStyle = "rgb(200,0,0)";//此处在环境中添加样式 
        ctx.fillRect (10, 10, 55, 50);//画出一个矩形 从10px 10px开始画 长宽分别为55px 50px

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";//又一个图形 颜色 和透明度
        ctx.fillRect (30, 30, 55, 50);
      }
    }
  </script>
  <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
 </head>
 <body onload="draw()">
   <canvas id="canvas" width="150" height="150"></canvas>
<!-- 建立一个150*150的画布 当不设置高度和宽度时，默认值为300*300 只是一个画布 在未进行渲染之前是空的-->
 </body>

　2.　canvas绘制矩形的三种方法：

fillRect(x, y, width, height) 绘制一个填充的矩形

strokeRect(x, y, width, height) 绘制一个矩形的边框

clearRect(x, y, width, height)  清除指定矩形区域，让清除部分完全透明。

var ctx=c.getContext("2d");
ctx.beginPath();//首先，你需要创建路径起始点
ctx.moveTo(20,20);//然后你使用画图命令去画出路径。
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.clocePath();//闭合路径
ctx.strokeStyle="green";
ctx.stroke();//绘制轮廓
ctx.fill()//进行填充

stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。

3.绘制圆弧和圆形

void ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

x：圆弧中心x的坐标。y:圆弧中心y的坐标。radius:半径。startAngle:圆弧的起始点， x轴方向开始计算，单位以弧度表示。endAngle:圆弧的终止点，y轴方向开始计算。anticlockWise:顺时针/逆时针，取值为true(逆时针)/false(顺时针)，默认值为顺时针，其中2 * Math.PI表示360度。

 

 

posted @ 2017-09-05 18:15  方思  阅读(190)  评论(0)    收藏  举报