canvas基础入门绘制线条三角形七巧板
Posted yan-hua
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas基础入门绘制线条三角形七巧板相关的知识，希望对你有一定的参考价值。
复杂的内容都是有简单的线条结合而成的，想要绘制出复杂好看的内容先从画直线开始
canvas绘制直线先认识几个函数
beginPath()；开始一条路径，或重置当前的路径
moveTo(x,y)；用于规定直线的起点坐标
lineTo(x,y)；用于规定直线的终点坐标
closePath()；方法创建从当前点到开始点的路径
stroke()；方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色
利用上面的函数就可以简单的画出直线了
代码
<canvas id="canvas" style="border: 1px solid #000;">当前浏览器不支持canvas，请更换浏览器再试</canvas> <script type="text/javascript"> window.onload = function() { var canvas = document.getElementById("canvas"); canvas.width = 1024;//设置canvas宽高 canvas.height = 768; var context = canvas.getContext("2d"); context.beginPath(); context.moveTo(100, 100); context.lineTo(700, 700); context.closePath(); context.stroke(); } </script>
接下来个直线添加点样式：
lineWidth；属性设置或返回当前线条的宽度，以像素计
strokeStyle；属性设置或返回用于笔触的颜色、渐变或模式
fillStyle；属性设置或返回用于填充绘画的颜色、渐变或模式
fill()；方法填充当前的图像（路径）。默认颜色是黑色
JavaScript代码如下：
<canvas id="canvas" style="border: 1px solid #000;">当前浏览器不支持canvas，请更换浏览器再试</canvas> <script type="text/javascript"> window.onload = function() { var canvas = document.getElementById("canvas"); canvas.width = 1024;//设置canvas宽高 canvas.height = 768; var context = canvas.getContext("2d"); context.beginPath(); context.moveTo(100, 100); context.lineTo(700, 700); context.closePath();
context.lineWidth = 5;
context.strokeStyle = "red"; context.stroke(); } </script>
会绘制直线后我们接着来绘制一些图像，要绘制图像也是使用lineTo(x,y)，绘制三角形，代码如下
<canvas id="canvas" style="border: 1px solid #000;">当前浏览器不支持canvas，请更换浏览器再试</canvas> <script type="text/javascript"> window.onload = function() { var canvas = document.getElementById("canvas"); canvas.width = 1024;//设置canvas宽高 canvas.height = 768; var context = canvas.getContext("2d"); context.beginPath(); context.moveTo(100, 100); context.lineTo(700, 700); context.lineTo(100, 700); context.lineTo(100, 100); context.closePath(); context.lineWidth = 5; context.strokeStyle = "red"; context.stroke(); } </script>
这个时候在是实现一些复杂的图像，七巧板：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas绘制七巧板</title> </head> <body> <canvas id="canvas" style="border: 1px solid #aa;display: block;margin: 50px auto;"> 当前浏览器不支持Canvas，请更换浏览器再试 </canvas> <script type="text/javascript"> var tangram = [ {p: [{x: 0,y: 0}, {x: 800,y: 0}, {x: 400,y: 400}],color: "#caff76"}, {p: [{x: 0,y: 0}, {x: 400,y: 400}, {x: 0,y: 800}],color: "#67becf"}, {p: [{x: 800,y: 0}, {x: 800,y: 400}, {x: 600,y: 600}, {x: 600,y: 200}],color: "#ef3d61"}, {p: [{x: 600,y: 200}, {x: 600,y: 600}, {x: 400,y: 400}],color: "#f9f51a"}, {p: [{x: 400,y: 400}, {x: 600,y: 600}, {x: 400,y: 800}, {x: 200,y: 600}],color: "#a594c0"}, {p: [{x: 200,y: 600}, {x: 400,y: 800}, {x: 0,y: 800}],color: "#fa8ecc"}, {p: [{x: 800,y: 400}, {x: 800,y: 800}, {x: 400,y: 800}],color: "#f6ca29"}, ]; window.onload = function() { var canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 800; var context = canvas.getContext("2d"); for(var i = 0; i < tangram.length; i++) { draw(tangram[i], context) } } function draw(plece, cxt) { cxt.beginPath(); cxt.moveTo(plece.p[0].x, plece.p[0].y); for(var i = 1; i < plece.p.length; i++) { cxt.lineTo(plece.p[i].x, plece.p[i].y); } cxt.closePath(); cxt.fillStyle = plece.color; cxt.fill(); cxt.strokeStyle = "black"; cxt.lineWidth = 3; cxt.stroke(); } </script> </body> </html>
以上是关于canvas基础入门绘制线条三角形七巧板的主要内容，如果未能解决你的问题，请参考以下文章