前几天在慕课网上学canvas的视频，因为老师讲的太好了让我觉得canvas很好玩，就跟着老师做了介个demo，这里记录一下。原视频连接如下：http://www.imooc.com/video/2435，有兴趣的同学可以去学学。
效果很简单，就不上图了，直接上代码吧：
1、html代码：
<body> <canvas id="myCanvas" style="border:1px solid #aaa;display:block;margin:50px;"> 当前浏览器不支持canvas，请换个浏览器试试。<!--这句话在支持canvas的浏览器中会被忽略，不支持的则会显示出来--> </canvas> </body>
2、JS代码：
window.onload=function(){
//1、获取canvas对象
var myCanvas = document.getElementById("myCanvas");
myCanvas.width=800;//设置画布的宽度
myCanvas.height=800;//设置画布的高度
//2、判断当前浏览器是否支持canvas
if(myCanvas.getContext("2d")){
var context = myCanvas.getContext("2d");//获取canvas的上下文环境
//3、使用canvas进行绘制（七巧板）
//3-1、定义数组，用来标记七巧板的坐标
var target=[
{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#CEFF68"},
{p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"#66BDD0"},
{p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"#F13D64"},
{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#FAF61B"},
{p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"#A793C4"},
{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#F78FCE"},
{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#F6C928"}
];
//3-2、循环各个数组进行绘制
for(var i=0;i<target.length;i++){
draw(target[i],context);//绘制
}
}else{
alert("当前浏览器不支持canvas，请换个浏览器试试");
}
}
/**
*该方法用来绘制图像
*@param piece:各个模块信息，包括坐标和填充颜色
*@parma cxt:canvas的context
**/
function draw(piece,cxt){
cxt.beginPath();
cxt.moveTo(piece.p[0].x,piece.p[0].y);//起点
for(var i=1;i<piece.p.length;i++){
cxt.lineTo(piece.p[i].x,piece.p[i].y);//画七巧板的各条直线
}
cxt.closePath();
//填充颜色
cxt.fillStyle=piece.color;
cxt.fill();//填充
//设置边框线
cxt.lineWidth=3;
cxt.strokeStype="black";//边框线
cxt.stroke();
}
相关推荐
这只是一个基本的示例，实际的七巧板需要包括所有七个形状：一个大正方形、两个小正方形、一个中等大小的平行四边形、两个三角形和一个不规则五边形。你可以为每个形状创建一个函数，然后根据需要调用它们以在画布上...
七巧板是一种古老的益智玩具，由七个不同形状的板组成，可以拼出各种图案。在HTML5 Canvas上绘制七巧板图形，可以结合数学、编程和设计，为网页增加互动性和趣味性。 首先，我们需要理解Canvas的基本结构。...
在这个“HTML5 canvas绘制七巧板代码”项目中，开发者可以学习如何利用JavaScript和HTML5 canvas来实现一个交互式的七巧板游戏。 七巧板是一种古老的益智玩具，由七块不同形状的木板组成，可以拼出各种不同的图案。...
HTML5 canvas 七巧板效果，对于Canvas来说，绘制七巧板似乎是比较简单的事了，这个例子适合初学者学习Canvas的使用，一些简单的HTML5技巧。在使用传统CSS来布局时，可能会遇到诸多问题，但是像七巧板这种不规则的...
使用html5的canvas技术画的七巧板，内有注释，简明易懂
这个七巧板特效源码是一个很好的学习示例，它展示了如何利用HTML5 Canvas进行图形绘制和动画制作，对于想要深入学习HTML5图形编程的开发者来说非常有价值。 总结一下，这个压缩包包含了一个使用HTML5 Canvas技术...
七巧板是一种古老的智力玩具，由七个形状不规则的板组成，可以拼出各种图案。这个"html5 canvas绘制七巧板特效"项目，很可能是通过JavaScript和HTML5 Canvas API来实现七巧板的动态展示和交互效果。 首先，我们要...
我们可以使用Graphics类来在Canvas上绘制七巧板的各个部分，包括矩形、直角三角形和等腰直角三角形。通过设置颜色、线宽和填充模式，可以为七巧板添加不同的视觉效果。 3. **数据结构与算法**： 为了存储和操作...
这个"HTML5 canvas绘制七巧板特效代码"是一个基于canvas实现的互动性图形项目，通过JavaScript编程来完成。七巧板是一种古老的益智游戏，由七个不同形状的板块组成，可以拼出各种图案。在网页上实现这种效果，不仅...
七巧板由七块不同形状的板子组成：一个大正方形、两个直角三角形、一个中等大小的正方形、一个平行四边形和两个小直角三角形。这些形状可以用路径（Path）API来绘制，如`ctx.beginPath()`开始路径，`ctx.moveTo()`...
这个"HTML5 canvas绘制七巧板图形代码"实例，是初学者掌握canvas API的一个好练习，通过它我们可以深入理解HTML5的绘图功能。 首先，canvas是一个二维绘图表面，我们可以通过JavaScript来控制它的行为。在HTML中，...
总的来说，通过学习这个实例，你可以掌握HTML5 canvas的基本绘图操作，如路径构建、颜色填充和边框绘制，同时也能了解如何结合鼠标事件来实现交互性。这将为你进一步探索更复杂的canvas动画、游戏开发或者数据可视化...
用DI做的七巧板游戏，里面附代码，发布publish文件，运行DI可以玩
在这个"unity七巧板拼图游戏源文件"中，我们可以深入学习如何利用Unity来构建一个有趣的益智游戏。 首先，我们要了解七巧板的基本概念。七巧板是一种古老的智力玩具，由七个不同形状的平面板块组成，通过拼接可以...
这个名为"Android自定义不规则七巧板布局.zip"的压缩包显然包含了一个实现自定义不规则七巧板布局的项目。七巧板布局通常涉及到多个可交互的形状，这些形状可以自由组合，形成各种不同的图案，为用户提供有趣的游戏...
总的来说，这个项目展示了HTML5 Canvas的灵活性和JavaScript的动态特性，是一个很好的学习案例，可以帮助开发者深入理解Canvas API以及如何利用JavaScript实现交互式图形。通过实践这个项目，你可以提升Web前端开发...
1.3_Canvas绘制基础之绘制直线、多边形和七巧板｜倒计时粒子效果｜Canvas图形、动画、游戏开发从入门到精通全系列课程
本主题聚焦于“Android自定义不规则七巧板布局”，这是一种基于七巧板概念的布局方式，能够帮助开发者构建出形状各异、交互丰富的UI元素。 七巧板布局的核心思想是将屏幕空间分割成若干个可重排的不规则形状，这些...