标签：
先讲讲canvas
|
1
|
<canvas id="canvas" width="500" height="500"></canvas> |
创建一个画幕
|
1
2
|
var canvas = document.getElementById(‘canvas‘); var ctx1 = canvas.getContext(‘2d‘); |
获取画幕对象，再创建一个绘制环境
|
1
2
3
|
beginPath //起始路径，当前路径moveTo //路径移动到指定点closePath //回到起始路径 |
三个基本路径方法
|
1
2
|
ctx.translate(w/2-10,h/2-10); //移动原点坐标ctx.rotate(60*Math.PI/180); // 旋转坐标系 |
两个基本操作函数，最开始的原点坐标（0，0），位于画幕左上角，移动和旋转都是一次改变，之后的都改变了，大家好好体会
|
1
2
3
4
|
ctx.stroke(); //填充空心ctx.fill(); //填充实心ctx.strokeStyle=""; //设计填充样式，颜色、渐变和模式ctx.fillStyle=""; |
两种基本绘画形式，，，渐变我没有用过，就不列出来了
|
1
2
3
4
|
ctx.rect（）; //绘制矩形ctx.arc(); //绘制曲线和圆ctx.lineTo(); //绘制直线 ctx.drawImage(); //绘制图像 |
上面几个函数和fill（）、stroke（）是结合用的，可以先ctx.rect();ctx.fill(),也可以直接ctx.fillRect();绘制rect()和arc()可以获得路径，我这次就是这样处理的，图案我没深究，感觉没它们好用吧
获得图像有两种方法
|
1
2
3
4
5
6
7
8
9
10
|
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路径绘制事件的代码，希望对新手有些帮助
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
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");} //重绘，构建路径，并形成响应 |
需要进一步帮助或者获取详细代码的小伙伴可以给我留言或加我QQ：752227740，有不足的地方恳请大神们指正，代码不全给大家带来不便希望谅解！
标签：
原文地址：http://www.cnblogs.com/lkzcman/p/4526512.html
