Canvas绘图小结

一、目前web绘图技术一览

①统计图表 echats
②实时走势图 canvas
③在线画图板 魔猴
④HTML5游戏 three.js
⑤可用绘图技术：
canvas 位图，单位是px 2D图像和图形
svg 矢量图
webGL 3D图像和图形

二、canvas 常规图形绘制

本文我们先就Canvas绘图做一个小结。

1.定义创建 canvas

<canvas width="600" height="400" id="canvas"></canvas>// 在Html中创建画布，并设定画布尺寸 javascript: var canvas = document.getElementById("canvas");//获取画布对象（画笔）Context上下文content内容var context = canvas.getContext("2d"); 12345 2.1矩形

ctx.fillRect(x,y,w,h);// 实心矩形ctx.fillStyle = "#FFF";ctx.strokeRect(x,y,w,h);// 空心矩形ctx.strokStyle = "#FFF";ctx.linewidth = 10;// 线条宽度 12345 2.2圆形

// ctx.arc(圆心x, 圆心y, 半径r, 起始角度位置, 重点角度位置, counterclockwise);// counterclockwise : 可选参数，默认顺时针绘制，false;ctx.beginPath();ctx.arc(280,60,50,0,Math.PI * 2);ctx.closePath();ctx.stroke() 123456 3.线性渐变

// 创建一个渐变对象 ctx.createLinearGradient(x0,y0,x1,y1)，var grad = cxt.createLinearGradient(0,0,400,300);// 设置渐变颜色及偏移度grad.addColorStop(0,"red");grad.addColorStop(0.3,"yellow");grad.addColorStop(0.6,"pink");grad.addColorStop(1,"blue");ctx.fillStyle = grad;ctx.fillRect(0,0,400,300); 123456789 4.扇形渐变

// 创建渐变对象：ctx.createRadialGradient(x0,y0,r0,x1,y1,r1)var grad = cxt.createRadialGradient(150,150,0,150,150,200);grad.addColorStop(0,"red");grad.addColorStop(0.5,"blue");grad.addColorStop("1","yellow");ctx.fillStyle = grad;ctx.fillRect(0,0,400,400); 1234567 5.绘制文字

// 设置文字的font属性ctx.font = "bold 48px 宋体";// 绘制文字// context.fillText(text,x,y,maxWidth);ctx.strokeRect(100,100,200,200)ctx.fillText("TXT_01",100,100,50);ctx.strokeText("TXT_02",200,200); 1234567 6.绘制文字的水平对齐

// 可以设置文字对齐ctx.textAlign = "center";ctx.textAlign = "right";ctx.textAlign = "left";ctx.textAlign = "end";ctx.textAlign = "start";ctx.textBaseline = "alphabetic";// 文本基线 1234567 7.路径绘制

// 1.创建路径ctx.beginPath();// 2.绘制形状ctx.rect(10,10,100,100);// 3.绘制ctx.stroke();// context.fill();// 4.关闭当前路径ctx.closePath();/* 路径绘图 */ctx.beginPath();// 开始ctx.moveTo(10,10);// 起始点ctx.lineTo(100,10);// 转折点ctx.lineTo(100,100);ctx.lineTo(200,100);ctx.lineTo(300,200);ctx.closePath();// 结束ctx.lineWidth = 2;// 线条宽度ctx.fill()// 填充

12345678910111213141516171819

三、canvas 图片与图形绘制

1.canvas 引入图片

var myimg = new Image();myimg.src = "imgs/1.jpg";myimg.onload = function(){context.drawImage(myimg,10,10,300,300);}/*画布中不显示图片的原因：先加载canvas画布,在画布中加载图片 解决办法：window.onload - 页面加载完毕img.onload - 保证图片先加载完毕 推荐使用 */ 123456789101112 2.canvas 图片平铺

var myimg = new Image();myimg.src = "imgs/1.jpg";myimg.onload = function(){var ptn = context.createPattern(myimg,"repeat");context.fillStyle = ptn;context.fillRect(0,0,canvas.width,canvas.height);} 1234567 3.canvas 图片切割

var myimg = new Image();myimg.src = "imgs/1.jpg";myimg.onload = function(){context.drawImage(myimg,0,0);}//截图 => clip() 属性创建一个路径context.beginPath();context.arc(180,70,50,0,Math.PI*2);// context.rect(120,20,150,100);context.closePath();context.clip(); 12345678910 4.canvas 绘制原地旋转图片

var img = new Image();img.src = "imgs/hero1.png";img.onload = function(){var deg = 0;setInterval(function(){cxt.clearRect(0,0,w,h);// 清除画布cxt.save();// 存储APIdeg += 5;cxt.translate(img.width/2,img.height/2);// 新设原点cxt.rotate(deg * Math.PI/180);// 旋转角度//绘制图像设置绘制图像时的坐标位置cxt.drawImage(img,-(img.width/2),-(img.height/2));cxt.restore();// 存储API 12345678910111213

网址：Canvas绘图小结 https://www.yuejiaxmz.com/news/view/73490

相关内容

解决canvas导出图片模糊问题
使用CAD布局绘图的好处
亲子绘画活动总结（精选5篇）
用爱绘就“更儿童教育”育人新图景
《新手小白不费力露营指南》
国内外11个AI生成图片的软件和工具，智能创作图像和绘画
绘本连载
《好脏的哈利：日本绘本之父松居直盛赞“绘本=文×图”的最佳典范》【美】吉恩·蔡恩 文 【美】玛格丽特·布罗伊·格雷厄姆 图 任溶溶
绘画艺术鉴赏论文汇总十篇
中国结图片

随便看看