用Canvas画一个七巧板

今天刚开始学习canvas，就画了一个简易的七巧板。

<!DOCTYPE html>
<html>
<head><title>七巧板</title>
</head><body>
<canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;"></canvas>
</body><script>
//定义一个数组包含七个对象，每个对象里有图形的顶点坐标数组（p）和图形颜色（color）。
//*注意四边形及以上的点的坐标一定要按顺序。var pos = [{p:[{x:0,y:0},{x:600,y:0},{x:300,y:300}],color:"#ed811f"},{p:[{x:600,y:0},{x:600,y:600},{x:300,y:300}],color:"#69dce8"},{p:[{x:0,y:0},{x:0,y:300},{x:150,y:450},{x:150,y:150}],color:"#e500cd"},{p:[{x:150,y:150},{x:150,y:450},{x:300,y:300}],color:"#0140e5"},{p:[{x:300,y:300},{x:150,y:450},{x:300,y:600},{x:450,y:450}],color:"#00e4a5"},{p:[{x:450,y:450},{x:300,y:600},{x:600,y:600}],color:"#e9e500"},{p:[{x:0,y:300},{x:0,y:600},{x:300,y:600}],color:"#0ea00f"}]window.onload = function(){var canvas = document.getElementById("canvas");canvas.width = 600; canvas.height = 600;if(canvas.getContext("2d")){var context = canvas.getContext("2d");for(var i = 0; i < pos.length; i++){draw(pos[i],context)}}else{alert("当前浏览器不支持Canvas，请更换浏览器再试");}}function draw(piece, ctx){ctx.beginPath();ctx.moveTo(piece.p[0].x, piece.p[0].y);for(var i=1; i<piece.p.length; i++){ctx.lineTo(piece.p[i].x, piece.p[i].y);         }ctx.closePath();ctx.fillStyle = piece.color;ctx.fill();ctx.lineWidth = 3;ctx.strokeStyle = "black";ctx.stroke();}
</script>
</html>

用Canvas画一个七巧板相关推荐

python程序、画一个笑脸_如何使用canvas画一个微笑的表情（代码示例）
本篇文章给大家带来的内容是关于如何使用canvas画一个微笑的表情(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实习期间让我用canvas画一个表情,比较简单,话不多说 ...
[html] 请使用canvas画一个椭圆
[html] 请使用canvas画一个椭圆 <script> var c=document.getElementById("myCanvas"); var ctx=c. ...
[html] 请使用canvas画一个渐变的长方形
[html] 请使用canvas画一个渐变的长方形 // 普通canvas绘图工具类// umd适配多种引入方式 (function(root, factory) {if (typeof define ...
用canvas画一个太极图（八卦图）
用canvas画一个太极图(八卦图) 源码展示链接: https://yanhappiness.github.io/Notes/canvas_src.html 理解什么是canvas canvas是H ...
如何利用canvas画一个圆，并且填充颜色
如何利用canvas画一个圆,并且填充颜色(小白专用,大佬勿看) canvas基础相信在此之前,你对canvas已经有一定的了解了,接下来我将介绍,如何利用canvas画一个圆. 1.新建一个htm ...
用canvas画一个五星红旗
利用canvas画一个好看的五星红旗!!! 简单,容易上手! <!DOCTYPE html> <html lang="utf-8"> <meta ht ...
用canvas画一个简易的机器猫头像
用canvas画一个机器猫的头像,原图如下: 代码实现效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <he ...
html5 --- 使用canvas画一个渐变矩形
我们希望得到如下效果: 首先准备画布 // HTML <canvas width="500" height="375" id ="a" ...
【css】使用 canvas 画一个圆、贝塞尔曲线画对话气泡
画一个圆 HTML <canvas id="canvas"></canvas> JavaScript var canvas = document.getEl ...

用Canvas画一个七巧板

用Canvas画一个七巧板相关推荐

最新文章

热门文章