福田营销型网站建站推广外包,黄冈论坛遗爱网,免费建设网站,泉州关键词优化canvas使用
1 canvas绘制基本
1 概念
HTML5canvas元素用于图形的绘制#xff0c;区别于css,它的绘制通过javascript来完成绘制的
canvas标签只是图形容器#xff0c;必须使用及保本来绘制图形
Canvas API主要聚焦与2D图形。同时canvas元素的Web…canvas使用
1 canvas绘制基本
1 概念
HTML5canvas元素用于图形的绘制区别于css,它的绘制通过javascript来完成绘制的
canvas标签只是图形容器必须使用及保本来绘制图形
Canvas API主要聚焦与2D图形。同时canvas元素的WebGL API则用于绘制硬件加速的2D和3D图形
2 绘制矩形
canvas idcanvas width200 height200/canvas
script/* 获取画布 */var canvas document.getElementById(canvas);/* 获取canvas上下文 getContent(2d) 可以返回一个对象该对象提供了绘图的方法和属性 */const ctx canvas.getContext(2d);/* 填充颜色 */ctx.fillStyle #ff2d51;/* 绘制矩形fillRect(x,y,width,height) x,y 分别是横轴 纵轴起点位置width height 表示绘制的宽高大小*/ctx.fillRect(10,10,100,100);
/script3 canvas中的坐标
canvas是一个二维网络
canvas的左上角坐标为0,0
绘制矩形fillRect(x,y,width,height) x,y 分别是横轴 纵轴起点位置width height 表示绘制的宽高大小
4 绘制途径 所谓的路径就是连续的坐标点的集合 在canvas上画线可以使用一下两种方法
moveTo(x,y) 定义线条开始坐标lineTo(x,y) 定义线条结束坐标
绘制线条必须使用到stroke()方法执行绘制
canvas idcanvas width200 height200/canvas
script/* 获取画布 */var canvas document.getElementById(canvas);/* 获取canvas上下文 getContent(2d) 可以返回一个对象该对象提供了绘图的方法和属性 */const ctx canvas.getContext(2d);/* 绘制路径 */ctx.moveTo(0,0)ctx.lineTo(100,100)/* 填充颜色 */ctx.strokeStyle #ff2d51;ctx.stroke();
/script5 绘制圆
canvas idcanvas width200 height200/canvas
script/* 获取画布 */var canvas document.getElementById(canvas);/* 获取canvas上下文 getContent(2d) 可以返回一个对象该对象提供了绘图的方法和属性 */const ctx canvas.getContext(2d);/* 绘制路径 */ctx.beginPath()/* arc(x,y,radius,startAngle,endAngle) 2*Math.PI圆的周长 */ctx.arc(100,100,50,0,Math.PI*2)ctx.closePath()/* 填充颜色 */ctx.fillStyle #ff2d51;ctx.fill();/* 边颜色 */ctx.strokeStyle #333;/* 边宽 */ctx.lineWidth 5;ctx.stroke();
/script1 绘制多个圆
canvas idcanvas width400 height400/canvas
script/* 获取画布 */var canvas document.getElementById(canvas);/* 获取canvas上下文 getContent(2d) 可以返回一个对象该对象提供了绘图的方法和属性 */const ctx canvas.getContext(2d);/* 绘制路径 */ctx.beginPath()/* arc(x,y,radius,startAngle,endAngle) 2*Math.PI圆的周长 */ctx.arc(200,200,100,0,Math.PI*2)ctx.closePath()/* 填充颜色 */ctx.fillStyle #ff2d51;ctx.fill();// 后绘制 覆盖先绘制的ctx.beginPath()/* arc(x,y,radius,startAngle,endAngle) 2*Math.PI圆的周长 */ctx.arc(200,200,50,0,Math.PI*2)ctx.closePath()/* 填充颜色 */ctx.fillStyle #333;ctx.fill();ctx.stroke();
/script2 绘制动画的圆
canvas idcanvas width400 height400/canvas
script/* 获取画布 */var canvas document.getElementById(canvas);/* 获取canvas上下文 getContent(2d) 可以返回一个对象该对象提供了绘图的方法和属性 */const ctx canvas.getContext(2d);var increateFlag true;var radius 50function draw(){/* 清除指定矩形内的形状 */ctx.clearRect(0,0,canvas.width,canvas.height)/* 绘制路径 */ctx.beginPath()/* arc(x,y,radius,startAngle,endAngle) 2*Math.PI圆的周长 */ctx.arc(200,200,radius,0,Math.PI*2)ctx.closePath()/* 填充颜色 */ctx.fillStyle #ff2d51;ctx.fill();ctx.stroke();if(radius 100){increateFlag false;}else if(radius 50){increateFlag true;}if(increateFlag){radius;}else{radius--;}}// draw();setInterval(draw,20);
/script3 绘制多圈动画
canvas idcanvas width400 height400/canvasscript/* 获取画布 */var canvas document.getElementById(canvas);/* 获取canvas上下文 getContent(2d) 可以返回一个对象该对象提供了绘图的方法和属性 */const ctx canvas.getContext(2d);var increateFlag true;var radius 50function draw(){/* 清除指定矩形内的形状 */ctx.clearRect(0,0,canvas.width,canvas.height)/* 绘制路径 */ctx.beginPath()/* arc(x,y,radius,startAngle,endAngle) 2*Math.PI圆的周长 */ctx.arc(200,200,radius,0,Math.PI*2)ctx.closePath()/* 填充颜色 */ctx.fillStyle #ff2d51;ctx.fill();// 后绘制 覆盖先绘制的/* 绘制路径 */ctx.beginPath()/* arc(x,y,radius,startAngle,endAngle) 2*Math.PI圆的周长 */ctx.arc(200,200,25,0,Math.PI*2)ctx.closePath()/* 填充颜色 */ctx.fillStyle blue;ctx.fill();ctx.stroke();if(radius 100){increateFlag false;}else if(radius 50){increateFlag true;}if(increateFlag){radius;}else{radius--;}}// draw();setInterval(draw,20);/script
