了解arcTo方法
要说画画中的函数，arcTo()真的超级实用！只需要告诉它起点在哪儿，终点1和终点2是啥以及半径多少，它就能帮你画出与这三个点形成的锐角紧密相连的曲线。这个曲线的开始和结束会紧贴着前两头和他们对应边上的切点，根本不用担心不美观，因为它自己会画得漂漂亮亮的。而且如果你接着添加第三个端点的话，arcTo()肯定不会让你失望的！它不但能帮你搞定那个弧线，甚至还会顺便帮你接上个短直线路程。这下子，无论是复杂还是简单的图，都能轻松搞定。
用arcto()画图时，注意角度、半径和它们之间的排布，稍微调整一下就能画出各种各样的线形，画图过程中不能忘了线长和方向，确保最后出来的结果和你想象的一致哈。
arcTo()<a href='https://www.icz.com/technicalinformation/web/vue2/2024/04/12623.html' title='绘制' target='_blank' rel="noopener">绘制</a> A Drawing of something var drawing=document.getElementById("drawing"); //确定浏览器支持元素 if(drawing.getContext){ //取得绘图上下文对象的引用，“2d”是取得2D上下文对象 var context=drawing.getContext("2d"); //设置canvas的onmouse事件 //路径指定 context.beginPath(); //单独使用arcTo()方法必须指定绘图开始的基点 context.moveTo(20,20); //创建两切线之间的弧/曲线 context.arcTo(200,150,20,280,50); //起始端点(20,20)、端点1(290,150)、端点2(20,280)三点组成的夹角相切并且半径为50的圆弧，并且只保留两切点之间圆弧部分以及起始端点到第一个切点之间部分 context.lineTo(200,280); //绘图 context.strokeStyle="red"; //指定路径线的粗细 context.lineWidth=3; //绘制路径 context.stroke(); //绘制文字标注 context.fillText("当前端点(20,20)", 20,20); context.fillText("端点1(200,150)", 200,150); context.fillText("端点2(20,280)", 20,280); context.fillText("直线结束点(200,280)", 200,280); //绘制辅助线 context.lineWidth = 1; context.strokeStyle="blue"; context.moveTo(20,20); context.lineTo(200,150); context.lineTo(20,280); context.stroke(); }
探究stroke()和fill()方法
Canvas里面有两个实用又强悍的工具，叫stroke()和fill()，用它们就能画出各种精细的路径，还能填色！用stroke()划个线，再用fill()填上颜色，就能让形状看起来更漂亮~
小秘密！用 stroke()，你可以随意更改画笔颜色和粗度，画出各种花样的线条！fill()这个函数，就是用来填充色彩或者搞点渐变色给你的元素加个彩妆的。只要巧妙运用这俩神器，各种炫酷的图像效果你都能轻松get到。
学习createPattern()函数
Canvas里面有个牛逼的功能叫createPattern，只要你给一张图，选个喜欢的方式，就能打造出完美的平铺效果！用createPattern能搞出各种炫酷的背景和填充图案，让你的画布变得超级丰富有趣！
stroke()、fill()<a href='https://www.icz.com/technicalinformation/web/javascript/2024/04/12759.html' title='用法' target='_blank' rel="noopener">用法</a> .myCanvas{ border:2px solid #f00; } window.onload = function(){ drawConvas1(); drawConvas2(); }; function drawConvas1(){ var canvas = document.getElementById("myCanvas1"); var context = canvas.getContext("2d"); //1、绘制三解形路径 context.beginPath(); context.moveTo(20,20); context.lineTo(20,100); context.lineTo(100,100); context.lineTo(20,20); context.strokeStyle = "red"; context.stroke(); //2、绘制矩形80*80 context.beginPath(); context.moveTo(20,200); context.lineTo(100,200); context.lineTo(100,280); context.lineTo(20,280); context.lineTo(20,200); context.stroke(); //绘制坐标点标注，以方便看其原理 context.fillText("(20,20)",20,20); context.fillText("(20,100)",20,100); context.fillText("(100,100)",100,100); context.fillText("(20,200)",20,200); context.fillText("(100,200)",100,200); context.fillText("(100,280)",100,280); context.fillText("(20,280)",20,280); } function drawConvas2(){ var canvas = document.getElementById("myCanvas2"); var context = canvas.getContext("2d"); //1、绘制三解形填充 context.beginPath(); context.moveTo(20,20); context.lineTo(20,100); context.lineTo(100,100); context.lineTo(20,20); context.fillStyle = "red"; context.fill(); //2、绘制填充矩形80*80，先绘制路径再用fill()方法填充 context.beginPath(); context.moveTo(20,200); context.lineTo(100,200); context.lineTo(100,280); context.lineTo(20,280); context.lineTo(20,200); context.fill(); //上面的代码相当于 //context.fillRect(20,200,80,80); //3、使用方法fillRect(x,y,width,height)绘制矩形填充 context.fillRect(120,200,80,80); }您的浏览器不支持canvas 您的浏览器不支持canvas
用repeat、repeat-x、repeat-y和no-repeat，就能自己动手做个漂亮的图样！还可以玩出各种花样。选图片也挺讲究的哟～别只看美不美观，还得看看跟背景搭不搭才行！这样堆砌起来的效果会更好看喔！
咱们来讨论下CreateImageData和PutImageData呗，都挺火热的话题。
Canvas里有种牛逼的函数叫”createImageData”和”putImageData”，俩都专门解决像素问题。createImageData的功能就是在画布上营造一堆空白的像素数据，尺寸就和画布一样大；然后我们还有 putImageData，搞定得比谁都好，就是能任意放置你想要的像素数据到画布上的指定地方。
这些函数可以帮你随心所欲地控制画布里每个点，有点儿像玩橡皮泥！如果用好了，在某些时候还是挺好使的，像是给图片修图，做特效啥的。不过记得别忘了调整像素数据对象的格子、大小和位置。
探讨toDataURL()导出图片
createPattern()用法 .myCanvas{ border:2px solid #f00; } window.onload = function(){ drawConvas1(); drawConvas2(); }; function drawConvas1(){ var canvas = document.getElementById("myCanvas1"); var context = canvas.getContext("2d"); //1、创建一个图片对象 var img = new Image(); img.src = "html5.png"; ///当图片加载完毕后再设置对应的图像平铺模式并填充矩形 img.onload = function(){ var pattern = context.createPattern(img, "repeat"); context.fillStyle = pattern; context.fillRect(0,0,200,200); } } function drawConvas2(){ var canvas = document.getElementById("myCanvas2"); var context = canvas.getContext("2d"); //1、创建一个图片对象 var img = new Image(); img.src = "html5.png"; ///当图片加载完毕后再设置对应的图像平铺模式并填充矩形 img.onload = function(){ var pattern = context.createPattern(img, "repeat"); context.fillStyle = pattern; context.fillRect(30,30,200,200); } }您的浏览器不支持canvas 您的浏览器不支持canvas
你知不知道Canvas里面有个“神器”toDataURL()？它超级厉害，可以直接把整个Canvas 画布变成图片，而且还会告诉你图片的相关信息。这样一搞，不管你在Canvas上乱涂乱画出什么东西，都可以随时变成图片保存起来，或者发个朋友圈炫耀一下都是小意思！
找个合适的图片类型，像image/png之类的，想想还要保存在哪儿！对了，记得toDataURL()函数会让图像稍微变化或剪切，所以导出来的图片要和预想的效果完全一致！
总结
看完这篇文章后，我学到了怎么用arcTo弄出好看的线条，stroke()和fill()来上色，以及createPattern做出平铺图像效果，还学会了怎么处理像素数据并将做好的图形保存为图片。这些小技巧让我在绘制图形时变容易多了，更深入地理解了前端开发。
其实就是选择适合自己的办法，再加上小技巧，总能达到理想效果。当然了，别忘了多学习多积累，这样才会越来越牛逼！
聊聊呗：Canvas绘画让你遇到过哪些难题？碰到什么纠结的事情了吗？来这说说你的体验，我们都听听。
putImageData()用法 .myCanvas{ border:2px solid #f00; } window.onload = function(){ drawConvas1(); drawConvas2(); }; //画布1使用createImageData()、putImageData()画图 function drawConvas1(){ var canvas = document.getElementById("myCanvas1"); var context = canvas.getContext("2d"); var imgData=context.createImageData(100,100); for (var i=0;i您的浏览器不支持canvas 您的浏览器不支持canvas
。
评论0