html canvas
程序员文章站
2024-02-03 17:13:28
canvas :可以理解为一个div,作用是一块画板 如果想要使用canvas,需要创建一个“画家”。生成画家的方法: Transparency(透明度) globalAlpha = transparencyValue: 这个属性影响到 canvas 里所有图形的透明度,有效的值范围是 0.0 (完 ......
canvas :可以理解为一个div,作用是一块画板
var huaban = document.queryselector('.canvas');//画板 var bicaso = huaban.getcontext('2d');//画家 canvas上下文对象 //绘画操作 //表示在距离画板左上10px 10px的位置画了一个长宽分别为50px的矩形,默认填充颜色黑色 绘制矩形 bicaso.fillrect(10,10,50,50); //表示绘制轮廓线 bicaso.strokerect(10,10,50,50); //绘制画笔颜色 bicaso.fillstyle='颜色'; //擦除矩形方法 bicaso.clearrect(x,y,要擦除的矩形宽度,要擦除的矩形高度);
globalalpha = transparencyvalue: 这个属性影响到 canvas 里所有图形的透明度,有效的值范围是 0.0 (完全透明)到 1.0(完全不透明),默认是 1.0。
globalalpha 属性在需要绘制大量拥有相同透明度的图形时候相当高效。不过,我认为使用rgba()设置透明度更加好一些。
canvas基础demo
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>document</title> </head> <body> <!-- 在页面中添加canvas元素 --> <!--1. 创建一块画布。必须定义canvas的id属性以方便js调用。 可以使用css控制canvas的外观 --> <canvas id="mycanvas" width="300" height="300" style="border: 2px solid red;"> <!-- 通过javascript可以在画布中添加线条文字图片动画,也可以绘画 --> <!-- 有些浏览器不支持canvas元素,会直接忽略canvas元素显示替代内容。所以需要为这些浏览器提供替代canvas的显示内容 --> 您的浏览器不支持canvas,请更新或更换浏览器。 </canvas> <canvas id="canvas2" width="300" height="300" style="border: 2px solid red;">您的浏览器不支持canvas</canvas> <canvas id="tutorial" width="300" height="300" style="border: 2px solid red;">您的浏览器不支持canvas</canvas> <script> // 2.在js脚本中获取到canvas元素 var canvas = document.getelementbyid('mycanvas'); // 判断getcontext()方法是否存在,来检测浏览器是否支持canvas========================== if(canvas.getcontext) { alert("您的浏览器支持canvas"); }else { alert("您的浏览器不支持canvas"); } // =============================================================================== // 3.通过canvas的getcontext()方法获取画布上下文,即创建context对象。以获取允许进行绘画的2d环境。 或者3d环境("3d") var context = canvas.getcontext("2d");//getcontext("2d")该方法用于返回一个内建的h5对象,该对象提供了用于绘图的方法和属性,使用该对象可以在canvas画布中绘制图形。 相当于画笔。 // 4.绘制图形的操作 ============================================================================================================= //绘制一个矩形,填充色为蓝色,矩形坐标为(10,10) 长50宽80。------------------------------- context.fillstyle="blue"; context.fillrect(10,10,50,80);//strokerect(x,y,width,height) clearrect(x, y, widh, height):清除指定的矩形区域,然后这块区域会变的完全透明。 // 循环生成若干个40px的小矩形,边框颜色随机------------------------------------------------- function draw0(){ var canvas = document.getelementbyid('canvas2'); if (!canvas.getcontext) return; var ctx = canvas.getcontext("2d"); for (var i = 0; i < 6; i++){//6行6列 for (var j = 0; j < 6; j++){ ctx.fillstyle = "rgb(${randomint(0, 255)},${randomint(0, 255)},${randomint(0, 255)})"; // ctx.fillstyle = "rgb(randomint(0, 255),randomint(0, 255),randomint(0, 255))"; ctx.strokerect(j * 50, i * 50, 40, 40); // ctx.fillrect(j * 50, i * 50, 40, 40); } } } draw0(); /** 返回随机的 [from, to] 之间的整数(包括from,也包括to) 颜色随机生成失败???????????????? */ function randomint(from, to){ return parseint(math.random() * (to - from + 1) + from); } //绘制一条直线------------------------------------------------- context.moveto(0,0); context.lineto(200,30); context.stroke(); // 绘制复杂图形--------使用绘制路径方法--------math.sin()----math.cos()------math.pi------beginpath()---lineto()----closepath()----------- var n = 0; var dx = 150; var dy = 150; var s = 100; context.beginpath();//开始一条路径 或重置当前路径 context.fillstyle = 'orange';//填充属性设置 context.strokestyle = 'yellow';//边框样式 context.linewidth = '1';//边框宽度 var x = math.sin(0);//使用sin cos三角函数计算顶点坐标x,y var y = math.cos(0); var dig = math.pi / 15 * 11;//math.pi返回的是圆周率 π for(var i = 0;i<30;i++) {//表示30个点的连线 var x = math.sin(i * dig); var y = math.cos(i * dig); context.lineto(dx+x*s,dy+y*s); } context.closepath();//关闭路径 context.fill();//填充 默认填充黑色 context.stroke();//边框 默认黑色 // 绘制圆形----------------beginpath()----arc()-----closepath()------------------------------- // arc(x,y,r,sangle,eangle,counterclockwise);---x,y表示圆心坐标---r表示圆版半径---sangle起始角【0】---eangle结束角【2*math.pi】---counterclockwise规定逆时针还是顺时针绘图(false顺时针,true逆时针) context.fillstyle = "blue";//设置画笔填充颜色样式 context.strokestyle = 'red';//设置边框颜色样式 context.strokewidth = '2'; context.beginpath();//开始创建路径 context.arc(50,50,50,0,2*math.pi,true);//圆心坐标(50,50) 半径50 逆时针旋转 从0°~360° context.closepath(); context.fill(); context.stroke(); // 绘制14条弧形-------------------------0°表示水平线 +90°表示负y轴方向----------------------------------------------------------- for(var i=0;i<15;i++) { context.strokestyle='red'; context.beginpath(); context.arc(10,300,i*10,0,math.pi*3/2,true);//弧心坐标(0,300) 半径10*i 逆时针旋转0°~((1/2)π)° 逆时针旋转0°~90° context.closepath();//从当前点到开始点的闭合路径操作 context.stroke(); } // 绘制圆弧-------------通过使用控制点----arcto(x1,y1,x2,y2,r);--控制点1坐标 控制点2坐标 圆弧半径---------------------------------------- context.beginpath(); context.moveto(150,150)//起点坐标 context.arcto(200,150,200,250,60);//arcto表示绘制的图形由两条切换所决定。l1为起始点和控制点1的直线,l2为控制点1和控制点2的直线 context.lineto(250,250);//到达的下一点的坐标 context.stroke();//绘图 context.fill();//填充 // 绘制路径------------------------路径都是闭合的---------------------------------- function draw1() { context.fillstyle="orange"; context.beginpath();//新建一条路径 context.moveto(10,10);//将画笔移动到指定坐标 context.lineto(200,50); context.lineto(10,50); context.closepath();//闭合 context.stroke();//绘制路径 context.fill();//填充闭合区域 } draw1(); // 透明度 transparency(0.0,1.0) globalalpha = transparencyvalue; 如果不是大量需要设置透明度,用rgba就够了 // linewidth 线条宽度 // linecap = type 线条末端样式 butt--末端以方形结束 round--末端以圆形结束 square--末端以方形结束,但两端都增加了一个长度为线宽一半的矩形区域 // linejoin=type 线条接合处样式 round--弧形 bevel--接合处以横线为底 miter(默认)--接合处延申相连部分的外边缘,形成灵性 function draw3(){ var canvas = document.getelementbyid('tutorial'); if (!canvas.getcontext) return; var ctx = canvas.getcontext("2d"); var linejoin = ['round', 'bevel', 'miter']; ctx.linewidth = 20; for (var i = 0; i < linejoin.length; i++){ ctx.linejoin = linejoin[i]; ctx.beginpath(); ctx.moveto(50, 50 + i * 50); ctx.lineto(100, 100 + i * 50); ctx.lineto(150, 50 + i * 50); ctx.lineto(200, 100 + i * 50); ctx.lineto(250, 50 + i * 50); ctx.stroke(); } } draw3(); </script> </body> </html>
小白进阶,期待学友共同讨论和补充
推荐阅读
-
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
-
HTML5 实现一个访问本地文件的实例
-
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
-
HTML5 Web Database 数据库的SQL语句的使用方法
-
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
-
HTML5中实现拖放效果无须借助javascript
-
openedx 在线字体问题_html/css_WEB-ITnose
-
怎么在a标签的图片右上角显示数字_html/css_WEB-ITnose
-
php去除html标记的原生函数详解,php标记函数详解
-
PHP读写文件生成HTML的代码举例