Html5 canvas学习和笔记——初级
七娃博客157 次
近期很想学CANVAS，想学习那种很炫酷的特效，然后就按照思否的大神《学习HTML5 Canvas这一篇文章就够了》学习了一下，为避免遗忘和丢失，在此做个笔记！
首先，html里面写好canvas，避免浏览器不支持，写入不支持需要加载的图片和文字；
<canvas id="tou" width="300" height="300" style="border: 1px solid #333;"> 你的浏览器不支持canvas <img src="pages/img/1.png" alt="你的浏览器不支持,就只能给你显示图片了" /> </canvas>
然后，就开始写canvas的js的写法了
1.获取canvas画布；
2.检测浏览器是否支持canvas;
3.创建2d画布，开撸；
var cv = document.getElementById("tou");//获取canvas画布渲染盒子
if(!cv.getContext) return;//检测是否支持画布
var ctx = cv.getContext("2d");//创建二维画布
1.再然后就，学画点吧！
<script type="text/javascript">
function draw(){//简单的canvas绘制矩形的方法
var cv = document.getElementById("tou");//获取canvas画布渲染盒子
if(!cv.getContext) return;//检测是否支持画布
var ctx = cv.getContext("2d");//创建二维画布
ctx.fillStyle = "#000000";//绘制样式
ctx.fillRect(10,10,10,10);//绘制形状，填充矩形fillRect(x轴位置,y轴位置,宽度,高度);
//描边矩形strockRect(x, y, width, height)；
//清除矩形区域clearRect(x, y, widh, height)
}
draw();
</script>
2.然后画直线；
<script type="text/javascript">
function draw(){//绘制线段
var cv = document.getElementById("tou");//获取canvas画布渲染盒子
if(!cv.getContext) return;//检测是否支持画布
var ctx = cv.getContext("2d");//创建二维画布
ctx.beginPath();//绘制路径开始
ctx.moveTo(0,0);//绘制路径起点
ctx.lineTo(300,150);//绘制路径的结束点
ctx.lineWidth= 5;//线宽，默认是1.0
ctx.closePath();//闭合路径
ctx.stroke();//绘制线段,默认为黑色
}
draw();
</script>
3.绘制三角形
<script type="text/javascript">
function draw(){//绘制三角形
var cv = document.getElementById("tou");//获取canvas画布渲染盒子
if(!cv.getContext) return;//检测是否支持画布
var ctx = cv.getContext("2d");//创建二维画布
ctx.beginPath();//绘制路径开始
ctx.moveTo(10,10);//绘制第一个顶点
ctx.lineTo(50,150);//绘制第二个顶点
ctx.lineTo(150,80);//绘制第三个顶点
ctx.closePath();//闭合路径
ctx.stroke();//绘制线段,默认为黑色
}
draw();
</script>
4.填充三角形
<script type="text/javascript">
function draw(){//填充三角形
var cv = document.getElementById("tou");//获取canvas画布渲染盒子
if(!cv.getContext) return;//检测是否支持画布
var ctx = cv.getContext("2d");//创建二维画布
ctx.beginPath();//绘制路径开始
ctx.moveTo(10,10);//绘制第一个顶点
ctx.lineTo(50,150);//绘制第二个顶点
ctx.lineTo(150,80);//绘制第三个顶点
ctx.closePath();//闭合路径
ctx.fill();//绘制线段,默认为黑色
}
draw();
</script>
5.圆弧
<script type="text/javascript">
function draw(){//填充圆弧
var cv = document.getElementById("tou");//获取canvas画布渲染盒子
if(!cv.getContext) return;//检测是否支持画布
var ctx = cv.getContext("2d");//创建二维画布
ctx.fillRect(50,50,2,3);
ctx.fillRect(5,100,2,2);
ctx.beginPath();//绘制路径开始
ctx.arc(50, 50, 40, 0, 2*Math.PI , false);//第一种方法
//arc(x, y, r, startAngle, endAngle, anticlockwise):
//以(x, y)为圆心，以r为半径，从 startAngle弧度开始到endAngle弧度结束。anticlosewise是布尔值，true表示逆时针，false表示顺时针。(默认是顺时针)
//radians=(Math.PI/180)*degrees //角度转换成弧度
ctx.arcTo(50,50,5,100,100);//第二种方法 参数1、2：控制点1坐标 参数3、4：控制点2坐标 参数4：圆弧半径
ctx.stroke();//绘制线段,默认为黑色
}
draw();
</script>
补充：画圆
<script type="text/javascript">
function draw(){//简单的canvas绘制矩形的方法
var cv = document.getElementById("tou");//获取canvas画布渲染盒子
if(!cv.getContext) return;//检测是否支持画布
var ctx = cv.getContext("2d");//创建二维画布
ctx.beginPath();
ctx.arc(150,150,50,0,2*Math.PI);
ctx.fillStyle= "red";
ctx.fill();//填充
}
draw();
</script>
6.贝塞尔一次，二次曲线quadraticCurveTo
<script type="text/javascript">
function draw(){//贝塞尔一次，二次曲线quadraticCurveTo
var cv = document.getElementById("tou");//获取canvas画布渲染盒子
if(!cv.getContext) return;//检测是否支持画布
var ctx = cv.getContext("2d");//创建二维画布
ctx.beginPath();//绘制路径开始
ctx.moveTo(10,10);//绘制第一个顶点，没有起点，贝塞尔曲线是一次直线
ctx.quadraticCurveTo(50, 20, 10, 60);//贝塞尔曲线
ctx.stroke();//绘制线段,默认为黑色
}
draw();
</script>
7.贝塞尔三次次曲线bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)：
<script type="text/javascript">
function draw(){//贝塞尔三次次曲线bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)：
var cv = document.getElementById("tou");//获取canvas画布渲染盒子
if(!cv.getContext) return;//检测是否支持画布
var ctx = cv.getContext("2d");//创建二维画布
ctx.beginPath();//绘制路径开始
ctx.moveTo(10,10);//绘制第一个顶点，可以4个点控制
var cp1x = 5,cp1y= 8;//控制点1
var cp2x = 50,cp2y= 46;//控制点2
var x = 180,y= 46;//控制点2
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);//至少三个点
ctx.stroke();//绘制线段,默认为黑色
}
draw();
</script>
8.画虚线
<script type="text/javascript">
function draw(){//虚线
var cv = document.getElementById("tou");//获取canvas画布渲染盒子
if(!cv.getContext) return;//检测是否支持画布
var ctx = cv.getContext("2d");//创建二维画布
ctx.setLineDash([20, 5]); // [实线长度, 间隙长度]
ctx.lineDashOffset = -10;//lineDashOffset属性设置起始偏移量
ctx.strokeRect(50, 50, 210, 210);
}
draw();
</script>
9.写文字
<script type="text/javascript">
function draw(){//虚线
var cv = document.getElementById("tou");//获取canvas画布渲染盒子
if(!cv.getContext) return;//检测是否支持画布
var ctx = cv.getContext("2d");//创建二维画布
ctx.font = "20px sans-serif";
ctx.textAlign = "center";
//添加样式
//font = value当前我们用来绘制文本的样式。这个字符串使用和 CSS font属性相同的语法. 默认的字体是 10px sans-serif。
//textAlign = value文本对齐选项. 可选的值包括：start, end, left, right or center. 默认值是 start。
//textBaseline = value基线对齐选项，可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。
//direction = value文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。
ctx.fillText("天若有情", 10, 100);//fillText(text, x, y [, maxWidth])在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.
// ctx.strokeText("天若有情", 10, 200);//字体足够大才显示，strokeText(text, x, y [, maxWidth])在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的
}
draw();
</script>
10.虚线框
<script type="text/javascript">
function draw(){//虚线
var cv = document.getElementById("tou");//获取canvas画布渲染盒子
if(!cv.getContext) return;//检测是否支持画布
var ctx = cv.getContext("2d");//创建二维画布
ctx.setLineDash([20, 5]); // [实线长度, 间隙长度]
ctx.lineDashOffset = -10;//lineDashOffset属性设置起始偏移量
ctx.strokeRect(50, 50, 210, 210);
}
draw();
</script>
11.translate坐标原点移动
<script type="text/javascript">
function draw(){//translate坐标原点移动
var cv = document.getElementById("tou");//获取canvas画布渲染盒子
if(!cv.getContext) return;//检测是否支持画布
var ctx = cv.getContext("2d");//创建二维画布
ctx.save(); //保存坐原点平移之前的状态
ctx.translate(100, 100);
ctx.strokeRect(0, 0, 100, 100)
ctx.restore(); //恢复到最初状态
ctx.translate(220, 220);
ctx.fillRect(0, 0, 100, 100)
}
draw();
</script>
12.旋转
<script type="text/javascript">
function draw(){//rotate旋转坐标轴旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。旋转的中心是坐标原点。
var cv = document.getElementById("tou");//获取canvas画布渲染盒子
if(!cv.getContext) return;//检测是否支持画布
var ctx = cv.getContext("2d");//创建二维画布
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 50, 50)
ctx.save();
ctx.translate(100, 100);
ctx.rotate(Math.PI / 180 * 45);
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 100, 100);
ctx.restore();
ctx.save();
ctx.translate(0, 0);
ctx.restore();
}
draw();
</script>
13.变形
<script type="text/javascript">
function draw(){//transform变形矩阵
var cv = document.getElementById("tou");//获取canvas画布渲染盒子
if(!cv.getContext) return;//检测是否支持画布
var ctx = cv.getContext("2d");//创建二维画布
ctx.transform(1, 1, 0, 1, 0, 0);
ctx.fillRect(0, 0, 100, 100);
}
draw();
</script>
14.clip()把已经创建的路径转换成裁剪路径。裁剪路径的作用是遮罩。只显示裁剪路径内的区域，裁剪路径外的区域会被隐藏。
<script type="text/javascript">
function draw(){//clip()把已经创建的路径转换成裁剪路径。裁剪路径的作用是遮罩。只显示裁剪路径内的区域，裁剪路径外的区域会被隐藏。
var cv = document.getElementById("tou");//获取canvas画布渲染盒子
if(!cv.getContext) return;//检测是否支持画布
var ctx = cv.getContext("2d");//创建二维画布
ctx.beginPath();
ctx.arc(20,20, 100, 0, Math.PI * 2);
ctx.clip();
ctx.fillStyle = "pink";
ctx.fillRect(50, 20, 100,100);
}
draw();
</script>
15.形状合成globalCompositeOperation
<script type="text/javascript">
function draw(){//globalCompositeOperation 合成
var cv = document.getElementById("tou");//获取canvas画布渲染盒子
if(!cv.getContext) return;//检测是否支持画布
var ctx = cv.getContext("2d");//创建二维画布
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 200, 200);
ctx.globalCompositeOperation = "source-in"; //全局合成操作
//1. source-over(default)这是默认设置，新图像会覆盖在原有图像。
//
//2. source-in 仅仅会出现新图像与原来图像重叠的部分，其他区域都变成透明的。(包括其他的老图像区域也会透明)
//
//3. source-out仅仅显示新图像与老图像没有重叠的部分，其余部分全部透明。(老图像也不显示)
//
//4. source-atop新图像仅仅显示与老图像重叠区域。老图像仍然可以显示。
//
//5. destination-over新图像会在老图像的下面。
//
//6. destination-in 仅仅新老图像重叠部分的老图像被显示，其他区域全部透明。
//
//7. destination-out仅仅老图像与新图像没有重叠的部分。 注意显示的是老图像的部分区域。
//
//8. destination-atop 老图像仅仅仅仅显示重叠部分，新图像会显示在老图像的下面。
//
//9. lighter 新老图像都显示，但是重叠区域的颜色做加处理
//
//10. darken 保留重叠部分最黑的像素。(每个颜色位进行比较，得到最小的)blue: #0000ff red: #ff0000 所以重叠部分的颜色：#000000
//
//11. lighten
//保证重叠部分最量的像素。(每个颜色位进行比较，得到最大的)blue: #0000ff red: #ff0000 所以重叠部分的颜色：#ff00ff
//
//12. xor 重叠部分会变成透明
//
//13. copy 只有新图像会被保留，其余的全部被清除(边透明)
ctx.fillStyle = "red";
ctx.fillRect(100, 100, 200, 200);
}
draw();
</script>
评论 | 0 条评论