Html5 canvas学习和笔记——初级
七娃博客299 次
近期很想学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>
版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。
转载请注明来源:Html5 canvas学习和笔记——初级 - Qui-Note
评论 | 0 条评论