（1）使用canvas元素

<canvas>绘制图形的容器,必须使用javascript脚本来绘制图形

<h2> 画图入门 </h2>
<canvas id="mc" width="300" height="180"
    style="border:1px solid black"></canvas>
<script type="text/javascript">
    // 获取canvas元素对应的DOM对象
    var canvas = document.getElementById('mc');
    // 获取在canvas上绘图的CanvasRenderingContext2D对象
    var ctx = canvas.getContext('2d');
    // 设置填充颜色
    ctx.fillStyle = '#f00';
    // 绘制矩形
    ctx.fillRect(30 , 40 , 80 , 100);
</script>

使用canvas元素绘制图形

---

（2）绘图

1.Canvas绘图基础:CanvasRenderingContext2D

2.绘制几何图形

fillRect(float x,float y,float width,float height):填充一个矩形区域
strokeRect(float x,float y,float width,float height):绘制一个矩形 边框

<h2> 绘制矩形 </h2>
<canvas id="mc" width="400" height="280"
    style="border:1px solid black"></canvas>
<script type="text/javascript">
    // 获取canvas元素对应的DOM对象
    var canvas = document.getElementById('mc');
    // 获取在canvas上绘图的CanvasRenderingContext2D对象
    var ctx = canvas.getContext('2d');
    // 设置填充颜色
    ctx.fillStyle = '#f00';
    // 填充一个矩形
    ctx.fillRect(30 , 20 , 120 , 60);
    // 设置填充颜色
    ctx.fillStyle = '#ff0';
    // 填充一个矩形
    ctx.fillRect(80 , 60 , 120 , 60);
    // 设置线条颜色
    ctx.strokeStyle = "#00f";
    // 设置线条宽度
    ctx.lineWidth = 10;
    // 绘制一个矩形边框
    ctx.strokeRect(30 , 130 , 120 , 60);
    // 设置线条颜色
    ctx.strokeStyle = "#0ff";
    // 设置线条宽度
    ctx.lineJoin = "round";
    // 绘制一个矩形边框
    ctx.strokeRect(80 , 160 , 120 , 60);
    // 设置线条颜色
    ctx.strokeStyle = "#f0f";
    // 设置线条宽度
    ctx.lineJoin = "bevel";
    // 绘制一个矩形边框
    ctx.strokeRect(130 , 190 , 120 , 60);
</script>

绘制矩形

---

3.绘制字符串

fillText(String text,float x,float y,[float maxWidth]):填充字符串
strokeText(String text,float x,float y,[float maxWidth]):绘制字符串边框
textAlign:绘制字符串的水平对齐方式,有start,end,top,left,right,center等
textBaseAlign:设置绘制字符串的垂直对齐方式

<canvas id="mc" width="600" height="280"
    style="border:1px solid black"></canvas>
<script type="text/javascript">
    // 获取canvas元素对应的DOM对象
    var canvas = document.getElementById('mc');
    // 获取在canvas上绘图的CanvasRenderingContext2D对象
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = '#00f';
    ctx.font = 'italic 50px 隶书';
    ctx.textBaseline = 'top';
    // 填充字符串
    ctx.fillText('疯狂Java讲义', 0, 0);
    ctx.strokeStyle = '#f0f';
    ctx.font='bold 45px 宋体';
    // 绘制字符串的边框
    ctx.strokeText('轻量级Java EE企业应用实战', 0, 50);
</script>

绘制文字

---

4.设置阴影

属性：
shadowBlur:设置阴影的模糊度
shadowColor:设置阴影的颜色
shadowOffsetX:设置阴影在x方向的偏移
shadowOffsetY:设置阴影在y方向的偏移

<h2> 启用阴影 </h2>
<canvas id="mc" width="600" height="280"
    style="border:1px solid black"></canvas>
<script type="text/javascript">
    // 获取canvas元素对应的DOM对象
    var canvas = document.getElementById('mc');
    // 获取在canvas上绘图的CanvasRenderingContext2D对象
    var ctx = canvas.getContext('2d');
    // 设置阴影的模糊度
    ctx.shadowBlur = 5.6;
    // 设置阴影颜色
    ctx.shadowColor = "#222";
    // 设置阴影在X、Y方法上的偏移
    ctx.shadowOffsetX = 10;
    ctx.shadowOffsetY = -6;
    ctx.fillStyle = '#00f';
    ctx.font = 'italic 50px 隶书';
    ctx.textBaseline = 'top';
    // 填充字符串
    ctx.fillText('疯狂Java讲义', 0, 0);
    ctx.strokeStyle = '#f0f';
    ctx.font='bold 45px 宋体';
    // 绘制字符串的边框
    ctx.strokeText('轻量级Java EE企业应用实战', 0, 50);
    // 填充一个矩形区域
    ctx.fillRect(20 , 150 , 180 , 80);
    ctx.lineWidth = 8;
    // 绘制一个矩形边框
    ctx.strokeRect(300 , 150 , 180 , 80);
</script>

绘制阴影

---

5.使用路径

arc(float x,float y,float radius,float startAngle,float endAngle,boolean counterclosewise)

<h2> 绘制圆形 </h2>
<canvas id="mc" width="400" height="280"
    style="border:1px solid black"></canvas>
<script type="text/javascript">
    // 获取canvas元素对应的DOM对象
    var canvas = document.getElementById('mc');
    // 获取在canvas上绘图的CanvasRenderingContext2D对象
    var ctx = canvas.getContext('2d');
    for(var i = 0 ; i < 10 ; i++)
    {
        // 开始定义路径
        ctx.beginPath();
        // 添加一段圆弧
        ctx.arc(i * 25 , i * 25 , (i + 1) * 8 , 0 , Math.PI * 2 , true);
        // 关闭路径
        ctx.closePath();
        // 设置填充颜色
        ctx.fillStyle = 'rgba(255 , 0 , 255 , ' + (10 - i) * 0.1 + ')';
        // 填充当前路径。
        ctx.fill();
    }

绘制圆形

arcTo(float x1,float y1,float x2,float y2,float radus):假设从当前点到p1(x1,y1)绘制一条线条,再从p1(x1,y1)到p2(x2,y2)绘制一条直线，arcTo()则绘制一段同时与上面两条线条相切，且半径为radius的圆弧.

<h2> arcTo示意 </h2>
<canvas id="mc" width="400" height="280"
    style="border:1px solid black"></canvas>
<script type="text/javascript">
    /*
        该方法负责绘制圆角矩形
        x1、y2：是圆角矩形左上角的座标。
        width、height：控制圆角举行的宽、高
        radius：控制圆角矩形的四个圆角的半径
    */
    function createRoundRect(context , x1 , y1 , width , height , radius)
    {
        // 移动到左上角
        ctx.moveTo(x1 + radius , y1);
        // 添加一条连接到右上角的线段
        ctx.lineTo(x1 + width - radius, y1);
        // 添加一段圆弧
        ctx.arcTo(x1 + width , y1, x1 + width, y1 + radius, radius);
        // 添加一条连接到右下角的线段
        ctx.lineTo(x1 + width, y1 + height - radius);
        // 添加一段圆弧
        ctx.arcTo(x1 + width, y1 + height , x1 + width - radius 
            , y1 + height , radius);
        // 添加一条连接到左下角的线段
        ctx.lineTo(x1 + radius, y1 + height); 
        // 添加一段圆弧
        ctx.arcTo(x1, y1 + height , x1 , y1 + height - radius , radius);
        // 添加一条连接到左上角的线段
        ctx.lineTo(x1 , y1 + radius);
        // 添加一段圆弧
        ctx.arcTo(x1 , y1 , x1 + radius , y1 , radius);
        ctx.closePath();
    }
    // 获取canvas元素对应的DOM对象
    var canvas = document.getElementById('mc');
    // 获取在canvas上绘图的CanvasRenderingContext2D对象
    var ctx = canvas.getContext('2d');
    ctx.lineWidth = 3;
    createRoundRect(ctx , 30 , 30 , 200 , 100 , 20);
    ctx.stroke();
</script>

绘制圆角矩形

<h2> lineTo示意 </h2>
<canvas id="mc" width="420" height="280"
    style="border:1px solid black"></canvas>
<script type="text/javascript">
    /*
        该方法负责绘制多角星。
        n：该参数通常应设为奇数，控制绘制N角星。
        dx、dy：控制N角星的位置。
        size：控制N角星的大小
    */
    function createStar(context , n , dx , dy , size)
    {
        // 开始创建路径  
        context.beginPath();   
        var dig = Math.PI / n * 4;  
        for(var i = 0; i < n ; i++) 
        {  
            var x = Math.sin(i * dig);  
            var y = Math.cos(i * dig);  
            context.lineTo(x * size + dx ,y * size + dy);
        }
        context.closePath();  
    }
    // 获取canvas元素对应的DOM对象
    var canvas = document.getElementById('mc');
    // 获取在canvas上绘图的CanvasRenderingContext2D对象
    var ctx = canvas.getContext('2d');
    // 绘制3角星
    createStar(ctx , 3 , 60 , 60 , 50);
    ctx.fillStyle = "#f00";
    ctx.fill();
    // 绘制5角星
    createStar(ctx , 5 , 160 , 60 , 50);
    ctx.fillStyle = "#0f0";
    ctx.fill();
    // 绘制7角星
    createStar(ctx , 7 , 260 , 60 , 50);
    ctx.fillStyle = "#00f";
    ctx.fill();
    // 绘制9角星
    createStar(ctx , 9 , 360 , 60 , 50);
    ctx.fillStyle = "#f0f";
    ctx.fill();
</script>

绘制五角星

---

6.绘制曲线

bezierCurveTo(float cpX1,float cpY1,float cpX2,float cpY2,float x,float y)
quadraticCurveTo(float cpX,float cpY,float x,float y)

<h2> curveTo示意 </h2>
<canvas id="mc" width="420" height="280"
    style="border:1px solid black"></canvas>
<script type="text/javascript">
    /*
        该方法负责绘制花朵。
        n：该参数控制花朵的花瓣数。
        dx、dy：控制花朵的位置。
        size：控制花朵的大小
        length：控制花瓣的长度
    */
    function createFlower(context , n , dx , dy , size , length)
    {
        // 开始创建路径  
        context.beginPath(); 
        context.moveTo(dx , dy + size);
        var dig = 2 * Math.PI / n;
        for(var i = 1; i < n + 1 ; i++) 
        {
            // 结算控制点坐标
            var ctrlX = Math.sin((i - 0.5) * dig) * length + dx;
            var ctrlY= Math.cos((i - 0.5 ) * dig) * length + dy;
            // 结算结束点的坐标
            var x = Math.sin(i * dig) * size + dx;
            var y = Math.cos(i * dig) * size + dy; 
            // 绘制二次曲线
            context.quadraticCurveTo(ctrlX , ctrlY , x , y);
        }
        context.closePath();  
    }
    // 获取canvas元素对应的DOM对象
    var canvas = document.getElementById('mc');
    // 获取在canvas上绘图的CanvasRenderingContext2D对象
    var ctx = canvas.getContext('2d');
    // 绘制5瓣的花朵
    createFlower(ctx , 5 , 70 , 100 , 30 , 80);
    ctx.fillStyle = "#f00";
    ctx.fill();
    // 绘制6瓣的花朵
    createFlower(ctx , 6 , 200 , 100 , 30 , 80);
    ctx.fillStyle = "#ff0";
    ctx.fill();
    // 绘制7瓣的花朵
    createFlower(ctx , 7 , 330 , 100 , 30 , 80);
    ctx.fillStyle = "#f0f";
    ctx.fill();
</script>

curveTo绘制花朵

---

7.绘制位图

drawImage(Image image,float x,float y):把图片绘制到x,y处
drawImage(Image image,float x,float y,float width,float height):把图片绘制到x,y处,对图片进行缩放，绘制出来的图片宽为width，高为height
drawImage(Image image,Integer sx,Integer sy,Integer sw,Integer sh,float dx,float dy,float dw,float dy):

<h2> 绘制位图 </h2>
<canvas id="mc" width="420" height="280"
    style="border:1px solid black"></canvas>
<script type="text/javascript">
    // 获取canvas元素对应的DOM对象
    var canvas = document.getElementById('mc');
    // 获取在canvas上绘图的CanvasRenderingContext2D对象
    var ctx = canvas.getContext('2d');
    // 创建Image对象
    var image = new Image();
    // 指定Image对象装载图片
    image.src = "android.png";
    // 当图片装载完成时激发该函数
    image.onload = function()
    {
        // 保持原大小绘制图片
        ctx.drawImage(image , 20 , 10);
        // 绘制图片时进行缩放
        ctx.drawImage(image , 180 , 10 , 76 , 110);
        var sd = 50;
        var sh = 65
        // 从源位图中挖取一块、放大3倍后绘制在Canvas上
        ctx.drawImage(image , 2 , 50  , sd  ,  sh 
            , 265 , 10 , sd * 3 , sh * 3);
    }
</script>

绘制位图

（三）.图形特效处理

1.使用坐标变换

translate(float dx,float dy)
scale(float sx,float sy)
rotate(float angle)
save()保存当前的绘图状态
restore()：恢复之前保存的绘图状态

<h2> 坐标变换 </h2>
<canvas id="mc" width="420" height="320"
    style="border:1px solid black"></canvas>
<script type="text/javascript">
    // 获取canvas元素对应的DOM对象
    var canvas = document.getElementById('mc');
    // 获取在canvas上绘图的CanvasRenderingContext2D对象
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = "rgba(255, 0 , 0 , 0.3)";  
    // 图形绘制 
    ctx.translate(30 , 200);  
    for(var i = 0 ; i < 50 ; i++)
    {  
        ctx.translate(50 , 50);  
        ctx.scale(0.93 , 0.93);  
        ctx.rotate(-Math.PI / 10);  
        ctx.fillRect(0 , 0 , 150 , 75);  
    } 
</script>

坐标变换

<h2> 雪花飘飘 </h2>
<canvas id="mc" width="420" height="280"
    style="border:1px solid black"></canvas>
<script type="text/javascript">
    function createFlower(context , n , dx , dy , size , length)
    {
        // 开始创建路径  
        context.beginPath(); 
        context.moveTo(dx , dy + size);
        var dig = 2 * Math.PI / n;
        for(var i = 1; i < n + 1 ; i++) 
        {
            // 结算控制点坐标
            var ctrlX = Math.sin((i - 0.5) * dig) * length + dx;
            var ctrlY= Math.cos((i - 0.5 ) * dig) * length + dy;
            // 结算结束点的坐标
            var x = Math.sin(i * dig) * size + dx;
            var y = Math.cos(i * dig) * size + dy; 
            // 绘制二次曲线
            context.quadraticCurveTo(ctrlX , ctrlY , x , y);
        }
        context.closePath();  
    }
    // 定义每个雪花的初始位置
    snowPos = [
        {x : 20, y : 4},
        {x : 60, y : 4},
        {x : 100, y : 4},
        {x : 140, y : 4},
        {x : 180, y : 4},
        {x : 220, y : 4},
        {x : 260, y : 4},
        {x : 300, y : 4},
        {x : 340, y : 4},
        {x : 380, y : 4}
    ];
    function fall(context)
    {
        // 设置采用黑色作为填充色
        context.fillStyle = "#000";
        // 填充矩形
        context.fillRect(0 , 0 , 420 , 280);
        // 设置采用白色作为填充色
        context.fillStyle = "#fff";
        for (var i = 0 , len = snowPos.length ; i <len ; i++ )
        {
            // 保存当前绘图状态
            context.save();
            // 平移坐标系统评
            context.translate(snowPos[i].x , snowPos[i].y);
            // 旋转坐标系统
            context.rotate((Math.random() * 6 - 3 ) * Math.PI / 10);
            // 控制“雪花”下掉
            snowPos[i].y += Math.random() * 8;
            if (snowPos[i].y > 280)
            {
                snowPos[i].y = 4;
            }
            // 创建、并绘制“雪花”
            createFlower(context , 6 , 0 , 0 , 5 , 8);
            context.fill();
            // 恢复绘图状态
            context.restore();
        }       
    }
    // 获取canvas元素对应的DOM对象
    var canvas = document.getElementById('mc');
    // 获取在canvas上绘图的CanvasRenderingContext2D对象
    var ctx = canvas.getContext('2d');
    setInterval("fall(ctx);" , 200);
</script>

雪花飘飘

---

<h2> 坐标变换 </h2>
<canvas id="mc" width="600" height="360"
    style="border:1px solid black"></canvas>
<script type="text/javascript">
    function skew(context , angle)
    {
        // 借助于transform方法实现倾斜变换
        context.transform(1 , 0 , -Math.tan(angle) , 1 , 0 , 0);
    }
    // 获取canvas元素对应的DOM对象
    var canvas = document.getElementById('mc');
    // 获取在canvas上绘图的CanvasRenderingContext2D对象
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = "rgba(255, 0 , 0 , 0.3)";  
    // 图形绘制 
    ctx.translate(360 , 5);  
    for(var i = 0 ; i < 30 ; i++)
    {
        // 平移坐标系统
        ctx.translate(50 , 30);
        // 缩放坐标系统
        ctx.scale(0.93 , 0.93);
        // 倾斜变换
        skew(ctx , Math.PI / 10);
        ctx.fillRect(0 , 0 , 150 , 75);  
    }
</script>

倾斜变换

（4）.控制叠加的风格

globalCompositeOperation属性

<h2> 叠加风格 </h2>
选择叠加风格：<select style="width:160px" onchange="draw(this.value);";>
    <option value="source-over">source-over</option>
    <option value="source-in">source-in</option>
    <option value="source-out">source-out</option>
    <option value="source-atop">source-atop</option>
    <option value="destination-over">destination-over</option>
    <option value="destination-in">destination-in</option>
    <option value="destination-out">destination-out</option>
    <option value="destination-atop">destination-atop</option>
    <option value="lighter">lighter</option>
    <option value="xor">xor</option>
    <option value="copy">copy</option>
</select><br/>
<canvas id="mc" width="400" height="200"
    style="border:1px solid black"></canvas>
<script type="text/javascript">
    var canvas = document.getElementById('mc');
    // 获取在canvas上绘图的CanvasRenderingContext2D对象
    var ctx = canvas.getContext('2d');
    var draw = function(compositeOper)
    {
        // 保存当前的绘图状态
        ctx.save();
        // 获取canvas元素对应的DOM对象
        ctx.clearRect(0 , 0 , 400 , 200);
        // 设置填充颜色
        ctx.fillStyle = '#f00';
        // 填充一个矩形
        ctx.fillRect(30 , 20 , 160 , 100);
        // 设置图形叠加风格
        ctx.globalCompositeOperation = compositeOper
        // 设置填充颜色
        ctx.fillStyle = '#0f0';
        // 填充一个矩形
        ctx.fillRect(120 , 60 , 160 , 100);
        // 恢复之前保存的绘图状态
        ctx.restore();
    }
    draw("source-over");
</script>

• source-over:新绘制的图形将显示在顶部,覆盖以前绘制的图形

  
  source-over

• source-in:只显示新图形与原图形重叠的部分， 其他部分变成透明

  
  source-in

• source-out:

  
  source-out

• source-atop:

  
  source-atop

• destination-over:

  
  destination-over

• destination-in

  
  destination-in

• destination-out

  
  destination-out

• destination-atop

  
  destination-atop

• lighter

  
  lighter

• xor:绘制新图形和原图形不重叠的部分

  
  xor

• copy:至绘制新图形，原图形变成透明

  
  copy

---

（5）.控制填充风格

1.线性渐变

<h2> 线性渐变 </h2>
<canvas id="mc" width="400" height="280"
    style="border:1px solid black"></canvas>
<script type="text/javascript">
    // 获取canvas元素对应的DOM对象
    var canvas = document.getElementById('mc');
    // 获取在canvas上绘图的CanvasRenderingContext2D对象
    var ctx = canvas.getContext('2d');
    ctx.save();
    ctx.translate(30 , 20);
    // 创建线性渐变
    lg = ctx.createLinearGradient(0 , 0 , 160 , 80);
    // 向线性渐变上添加颜色
    lg.addColorStop(0.2 , "#f00");
    lg.addColorStop(0.5 , "#0f0");
    lg.addColorStop(0.9 , "#00f");
    // 设置使用线性渐变作为填充颜色
    ctx.fillStyle = lg;
    // 填充一个矩形
    ctx.fillRect(0 , 0 , 160 , 80);
    // 恢复坐标系统
    ctx.restore();
    // 平移坐标系统
    ctx.translate(280 , 160)
    ctx.beginPath();
    // 添加圆弧
    ctx.arc(0 , 0  , 80 , 0 , Math.PI * 2 , true);
    ctx.closePath();
    ctx.lineWidth = 12;
    // 再次创建线性渐变
    lg2 = ctx.createLinearGradient(-40 , -40 , 80 , 50);
    // 向线性渐变上添加颜色
    lg2.addColorStop(0.1 , "#ff0");
    lg2.addColorStop(0.4 , "#0ff");
    lg2.addColorStop(0.8 , "#f0f");
    // 设置使用线性渐变作为边框颜色
    ctx.strokeStyle = lg2;
    ctx.stroke();
</script>

线性渐变

2.圆形渐变

<h2> 圆形渐变 </h2>
<canvas id="mc" width="400" height="280"
    style="border:1px solid black"></canvas>
<script type="text/javascript">
    // 获取canvas元素对应的DOM对象
    var canvas = document.getElementById('mc');
    // 获取在canvas上绘图的CanvasRenderingContext2D对象
    var ctx = canvas.getContext('2d');
    ctx.save();
    ctx.translate(30 , 20);
    // 创建圆形渐变
    lg = ctx.createRadialGradient(80, 40 , 5 , 80 , 40 , 60);
    // 向圆形渐变上添加颜色
    lg.addColorStop(0.2 , "#f00");
    lg.addColorStop(0.5 , "#0f0");
    lg.addColorStop(0.9 , "#00f");
    // 设置使用圆形渐变作为填充颜色
    ctx.fillStyle = lg;
    // 填充一个矩形
    ctx.fillRect(0 , 0 , 160 , 80);
    // 恢复坐标系统
    ctx.restore();
    // 平移坐标系统
    ctx.translate(280 , 160)
    ctx.beginPath();
    // 添加圆弧
    ctx.arc(0 , 0  , 80 , 0 , Math.PI * 2 , true);
    ctx.closePath();
    ctx.lineWidth = 12;
    // 再次创建圆形渐变
    lg2 = ctx.createRadialGradient(0, 0 , 5 , 0 , 0 , 80);
    // 向圆形渐变上添加颜色
    lg2.addColorStop(0.1 , "#ff0");
    lg2.addColorStop(0.4 , "#0ff");
    lg2.addColorStop(0.8 , "#f0f");
    // 设置使用圆形渐变作为填充颜色
    ctx.fillStyle = lg2;
    ctx.fill();
</script>

圆形渐变

3.位图填充

<h2> 位图填充 </h2>
<canvas id="mc" width="400" height="280"
    style="border:1px solid black"></canvas>
<script type="text/javascript">
    // 获取canvas元素对应的DOM对象
    var canvas = document.getElementById('mc');
    // 获取在canvas上绘图的CanvasRenderingContext2D对象
    var ctx = canvas.getContext('2d');
    ctx.save();
    ctx.translate(30 , 20);
    var image = new Image();
    image.src = "wjc.gif";
    image.onload = function()
    {
        // 创建位图填充
        imgPattern = ctx.createPattern(image, "repeat");
        // 设置使用位图填充作为填充颜色
        ctx.fillStyle = imgPattern;
        // 填充一个矩形
        ctx.fillRect(0 , 0 , 160 , 80);
        // 恢复坐标系统
        ctx.restore();
        // 平移坐标系统
        ctx.translate(280 , 160)
        ctx.beginPath();
        // 添加圆弧
        ctx.arc(0 , 0  , 80 , 0 , Math.PI * 2 , true);
        ctx.closePath();
        ctx.lineWidth = 12;
        // 设置使用位图填充作为边框颜色
        ctx.strokeStyle = imgPattern;
        ctx.stroke();
    }
</script>

位图填充

（6）.位图处理

1.位图剪裁

<h2> 位图裁剪 </h2>
<canvas id="mc" width="400" height="260"
    style="border:1px solid black"></canvas>
<script type="text/javascript">
    // 获取canvas元素对应的DOM对象
    var canvas = document.getElementById('mc');
    // 获取在canvas上绘图的CanvasRenderingContext2D对象
    var ctx = canvas.getContext('2d');
    var dig = Math.PI / 20 ;
    var count = 0;
    var image = new Image();
    image.src = "android.png";
    image.onload = function()
    {
        // 指定每隔0.15秒调用一次addRadial函数
        setInterval("addRadial();" , 150);
    }
    var addRadial = function()
    {
        // 保存当前的绘图状态
        ctx.save();
        // 开始创建路径
        ctx.beginPath();
        // 添加一段圆弧
        ctx.arc(200 , 130 , 200 , 0 , dig * ++count , false);
        // 让圆弧连接到圆心
        ctx.lineTo(200 , 130);
        // 关闭路径
        ctx.closePath();
        // 剪切路径
        ctx.clip();
        // 此时绘制的图片只有路径覆盖的部分才会显示出来
        ctx.drawImage(image , 124  , 20);
        ctx.restore();
    }
</script>

2.像素处理

<h2> 改变透明度 </h2>
<canvas id="mc" width="400" height="260"
    style="border:1px solid black"></canvas>
<script type="text/javascript">
    // 获取canvas元素对应的DOM对象
    var canvas = document.getElementById('mc');
    // 获取在canvas上绘图的CanvasRenderingContext2D对象
    var ctx = canvas.getContext('2d');
    var image = new Image();
    image.src = "android.png";
    image.onload = function()
    {
        // 用带透明度参数的方法绘制图片
        drawImage(image , 124  , 20 , 0.4);
    }
    var drawImage = function(image , x  , y , alpha)
    {
        // 绘制图片
        ctx.drawImage(image , x , y);
        // 获取从x、y开始，宽为image.width、高为image.height的图片数据
        // 也就是获取绘制的图片数据
        var imgData = ctx.getImageData(x , y , image.width , image.height);
        for (var i = 0 , len = imgData.data.length ; i < len ; i += 4 )
        {
            // 改变每个像素的透明度
            imgData.data[i + 3] = imgData.data[i + 3] * alpha;
        }
        // 将获取的图片数据放回去。
        ctx.putImageData(imgData , x , y);
    }
</script>

（7）.输出位图

<h2> 位图输出 </h2>
<canvas id="mc" width="360" height="280"
    style="border:1px solid black"></canvas>
<img id="result" src="" alt="图片输出"/>
<script type="text/javascript">
    // 获取canvas元素对应的DOM对象
    var canvas = document.getElementById('mc');
    // 获取在canvas上绘图的CanvasRenderingContext2D对象
    var ctx = canvas.getContext('2d');
    ctx.save();
    ctx.translate(30 , 20);
    var image = new Image();
    image.src = "wjc.gif";
    image.onload = function()
    {
        // 创建位图填充
        imgPattern = ctx.createPattern(image, "repeat");
        // 设置使用位图填充作为填充颜色
        ctx.fillStyle = imgPattern;
        // 填充一个矩形
        ctx.fillRect(0 , 0 , 160 , 80);
        // 恢复坐标系统
        ctx.restore();
        // 平移坐标系统
        ctx.translate(280 , 160)
        ctx.beginPath();
        // 添加圆弧
        ctx.arc(0 , 0  , 80 , 0 , Math.PI * 2 , true);
        ctx.closePath();
        ctx.lineWidth = 12;
        // 设置使用位图填充作为边框颜色
        ctx.strokeStyle = imgPattern;
        ctx.stroke();
        // 使用img元素来显示Canvas的输出结果
        document.getElementById("result").src = canvas.toDataURL("image/png");
    }
</script>

图片输出