canvas的路径绘制

先讲讲canvas

<canvas id="canvas" width="500" height="500"></canvas>

创建一个画幕

var canvas = document.getElementById('canvas'); 
var ctx1 = canvas.getContext('2d');

获取画幕对象，再创建一个绘制环境

beginPath //起始路径，当前路径
moveTo    //路径移动到指定点
closePath //回到起始路径

三个基本路径方法

ctx.translate(w/2-10,h/2-10);  //移动原点坐标
ctx.rotate(60*Math.PI/180);   // 旋转坐标系

两个基本操作函数，最开始的原点坐标（0，0），位于画幕左上角，移动和旋转都是一次改变，之后的都改变了，大家好好体会

ctx.stroke();               //填充空心
ctx.fill();                 //填充实心
ctx.strokeStyle="";         //设计填充样式，颜色、渐变和模式
ctx.fillStyle="";

两种基本绘画形式，，，渐变我没有用过，就不列出来了

ctx.rect（）;              //绘制矩形
ctx.arc();                //绘制曲线和圆
ctx.lineTo();             //绘制直线             
ctx.drawImage();          //绘制图像

上面几个函数和fill（）、stroke（）是结合用的，可以先ctx.rect();ctx.fill(),也可以直接ctx.fillRect();绘制rect()和arc()可以获得路径，我这次就是这样处理的，图案我没深究，感觉没它们好用吧

获得图像有两种方法

var img=document.getElementById("scream1"); 

<img id="scream" src="hb1.png" hidden />   //第一种

var img=new Image()  
img.src="/img/flower.png";  
img.onload = function () //确保图片已经加载完毕  
{  
    ctx.drawImage(img,100,100);  
}     //第二种

一个位置上是可以绘制多个图案的，并且后者会覆盖前者

最后，给出一段canvas路径绘制事件的代码，希望对新手有些帮助

canvas.addEventListener("mousedown",function(e){   
            p = getEventPosition(e);   
            reDraw(p,ctx);   
        }, false);    //给画幕添加事件监听器

function getEventPosition(ev){   
    var x, y;   
    if (ev.layerX || ev.layerX == 0) {   
        x = ev.layerX;   
        y = ev.layerY;   
    }else if (ev.offsetX || ev.offsetX == 0) { // Opera   
        x = ev.offsetX;   
        y = ev.offsetY;   
    }   
    return {x: x, y: y};   
}//获得点击触发坐标

 
function reDraw(p,ctx){  
w=window.innerWidth;
var img=document.getElementById("scream1");   
ctx.strokeStyle="#302e3a";
ctx.beginPath();
ctx.rotate(60*Math.PI/180);
ctx.rect(w/10,w/10,w/4,w/4);
ctx.drawImage(img,w/10,w/10,w/4,w/4); 
ctx.stroke();
if(ctx.isPointInPath(p.x, p.y))
alert("good");
}  //重绘，构建路径，并形成响应