配置网站域名解析,wordpress pending,专做民宿预定的网站,网站运营部的职责Canvas
Canvas简介
Canvas API 提供了一个通过JavaScript 和 HTML的元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。
Canvas API 主要聚焦于 2D 图形。而同样使用canvas元素的 WebGL API 则用于绘制硬件加速的 2D 和…Canvas
Canvas简介
Canvas API 提供了一个通过JavaScript 和 HTML的元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。
Canvas API 主要聚焦于 2D 图形。而同样使用canvas元素的 WebGL API 则用于绘制硬件加速的 2D 和 3D 图形。
Canvas使用
在HTML页面当中新建一个画板
canvas idcont/*此处书写内容在高版本浏览器内无内容*/
/canvasStep1
获取画布必须使用原生js获取
var canvas document.querySelector(#cont)Step2
获取画布上下文
var content canvas.getContext(2d);Step3
开启一条路径
content.beginPath();Step4
确定画布起始点
content.moveTo(100,100);Step5
确定画布结束点
content.lineTO(400,400);Step6
着色
content.stroke()Step
结束路径
content.closePath();Canvas画直线
默认直线
style#myline{border: 1px solid black;}
/style
bodycanvas idmyline width500 height500/canvas
/body
script//获取画布var canvasdocument.querySelector(#myline);//获取上下文var ct canvas.getContext(2d);//开始一条路径ct.beginPath();//画画起点ct.moveTo(100,100);//画画结束点ct.lineTo(400,400);//着色ct.stroke();//关闭路径ct.closePath();/script效果图 自定义直线
在着色前 添加以下代码
//线条颜色
ct.strokeStylegreen;
//线条宽度
ct.lineWidth5完整代码
style#myline{border: 1px solid black;}
/style
bodycanvas idmyline width500 height500/canvas
/body
script//获取画布var canvasdocument.querySelector(#myline);//获取上下文var ct canvas.getContext(2d);//开始一条路径ct.beginPath();//画画起点ct.moveTo(100,100);//画画结束点ct.lineTo(400,400);//着色前添加//设置线条颜色ct.strokeStylegreen//设置线条粗细ct.lineWidth5;//着色ct.stroke();//关闭路径ct.closePath();/script效果图 Canvas画矩形
绘制实心矩形
矩形样式
ct.fillStylered;
//
ct.fillRect(200,200,20,200)效果图 绘制空心矩形
ct.strokeRect(180,200,20,200)效果图 画随机柱形统计图 ct.fillStylered;for(var i0;i7;i){var height Math.random()*18010;ct.fillRect(120i*40,300-height,20,height)}效果图 随机颜色统计图
ct.fillStyle#parseInt(Math.random()*0xffffff).toString(16)效果图 清除画布
ct.clearRect(x,y,width,height);首先画一个矩形
style#mycanvas{display: block;border: 1px solid black;margin: 0 auto ;}
/style
bodycanvas idmycanvas width500 height500 /canvas
/body
scriptvar canvas document.querySelector(#mycanvas);var ct canvas.getContext(2d);ct.fillStylegreenct.fillRect(200,200,200,200);//清除画布内容ct.clearRect(210,230,100,100)
/script效果图 Canvas圆与圆弧
圆
方法
ct.arc(x,y,radius,startAngle,endAngle,countclockwish)/*x:中心点坐标xy:中心的坐标yradius:半径startAngle:开始的角度endAngle:结束的角度conutclockwish:旋转方向 false 顺时针true逆时针
*/0度起始点
画一个圆
style#mycanvas{margin: 0 auto;border: 1px solid black;display: block;}
/style
bodycanvas idmycanvas width500 height500/canvas
/body
scriptvar canvas document.querySelector(#mycanvas);var ct canvas.getContext(2d);ct.beginPath()ct.arc(255,255,50,0,Math.PI*2,true)ct.fillStylegreen //填充样式ct.fill() //填充ct.lineWidth5 ct.stroke();
/script效果图 圆弧 var canvas document.querySelector(#mycanvas);var ct canvas.getContext(2d);ct.beginPath()ct.lineWidth5ct.arc(255,400,50,1,2,false)ct.stroke()效果图 Canvas画茶杯Demo var canvas document.querySelector(#mycanvas);var ctcanvas.getContext(2d);//画一个茶杯ct.beginPath();ct.moveTo(100,200)ct.lineTo(100,450)ct.lineTo(300,450)ct.lineTo(300,200)ct.lineTo(100,200)ct.lineWidth3ct.stroke();ct.closePath();//画一个茶杯手柄ct.beginPath();ct.arc(300,325,50,-(Math.PI/2),Math.PI/2,false)ct.lineWidth3ct.stroke()ct.closePath();//热气for(var i0 ;i4;i){ct.beginPath();ct.arc(12060*i,100,20,-Math.PI/2,Math.PI/2,true)ct.arc(12060*i,140,20,-Math.PI/2,Math.PI/2,false)ct.stroke()}效果图 Canvas圆环加载条
var canvas document.querySelector(#mycanvas);var ctcanvas.getContext(2d);var fnbMath.PI/180;var db0;var asetInterval((){// console.log(fnb)dbfnb;drowpic(db)if(dbMath.PI*2){clearTimeout(a)}},100)var drowpicfunction(fnb){ct.beginPath();ct.lineWidth5ct.strokeStyleredct.arc(300,300,50,0,fnb,false);ct.stroke();ct.closePath();}效果图 Canvas碰撞小球 var canvas document.querySelector(#mycanvas);var ctcanvas.getContext(2d);// 画布大小var h500;var w500;//初始化var x40;var y50//速度var speedx5;var speedy5;setInterval(function(){ct.clearRect(0,0,w,h)xspeedx;yspeedy;if(x30 || x(w-50)){speedx-speedx;}if(y50 ||y(h-50)){speedy -speedy}ct.beginPath();ct.arc(x,y,30,0,Math.PI*2,false)ct.strokeStylegreen;ct.fillStylegreenct.fill();ct.stroke();},10)
效果图 动态
Canvas面向对象小球碰撞 var canvas document.querySelector(#mycanvas);var ctcanvas.getContext(2d);var h500;var w500;//定义一个随机产生器var ranfunction(num){return Math.random()*num;}//定义Ball球类var Ballfunction(){//Ball球类属性/初始点X初始点Y半价radius颜色Color水平速度Xspeed垂直速度Yspeedthis.x50;this.y50;this.radiusran(20)10; //大小[10-30]this.color#parseInt(ran(0xffffff)).toString(16);this.Xspeedran(4)2; //速度[2-6]this.Yspeedran(5)2 //速度[2-7]}//放入页面的方法Ball.prototype.show function(){//运动this.run();ct.beginPath();ct.arc(this.x,this.y,this.radius,0,Math.PI*2,false);ct.fillStylethis.color;ct.fill();ct.stroke();}//运动方法Ball.prototype.runfunction(){if(this.x30 || this.x(w-30)){this.Xspeed-this.Xspeed;}this.xthis.Xspeed;if(this.y30 ||this.y(h-30)){this.Yspeed -this.Yspeed;}this.ythis.Yspeed;}//定义一个数组存放小球var ballArray[];for(var i1;i5;i){var ballnew Ball();ballArray.push(ball);ball.show();}//运动setInterval((){ct.clearRect(0,0,w,h);for(var j0;jballArray.length;j){var ball ballArray[j];ball.show();}},50)效果图 随机跳动
Canvas画文字
ct.fillText(hello,200,200)实心文字 var canvas document.querySelector(#mycanvas);var ctcanvas.getContext(2d);ct.fillStyleredct.font100px 微软雅黑ct.fillText(Hello,200,200,50);效果图 空心文字 var canvas document.querySelector(#mycanvas);var ctcanvas.getContext(2d);ct.fillStyleredct.font100px 微软雅黑ct.fillText(Hello,200,200);//空心文字ct.strokeStyleyellowct.strokeText(Hello,100,100)
效果图 ,200) ### 实心文字~~~jsvar canvas document.querySelector(#mycanvas);var ctcanvas.getContext(2d);ct.fillStyleredct.font100px 微软雅黑ct.fillText(Hello,200,200,50);效果图
[外链图片转存中…(img-zwbvQoiY-1703316803433)]
空心文字 var canvas document.querySelector(#mycanvas);var ctcanvas.getContext(2d);ct.fillStyleredct.font100px 微软雅黑ct.fillText(Hello,200,200);//空心文字ct.strokeStyleyellowct.strokeText(Hello,100,100)
效果图
[外链图片转存中…(img-9SyJQL5A-1703316803433)]
