用到的方法:

注意点:

  • stokeStyle等样式要在stroke前边
  • 如果最后只有一个stroke或者fill,那么只填充最后一次路径的,之前的也会画出来但是没有填充看不到。所以每次begin+close Path后要fill或者stroke
 <!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="author" content="xing.org1^">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>canvas画七巧板</title>
<style>
/*
* @Author: guojufeng@
* @Date: 2018-09-18 12:23:44
*/
body{
background: #fff;
}
canvas {
margin: 0 auto;
cursor: pointer;
border: 1px solid #eee;
}
</style>
</head> <body>
<canvas id="canvas" width="500" height="500">
您的浏览器不支持canvas,请更换
</canvas>
<script>
// function DrawLine(arr) {
// /* 之前这种写法,以为要一个moveTo一个lineTo的,后来发现moveTo一个开头就行了,剩下的就是lineTo一直走,且最后一个可以不闭合,就是最后一个lineTo可以不回到点上,这样的形状不闭合 */
// for (var i = 0; i < arr.length; i++) {
// context.moveTo(arr[i][0], arr[i][1]);
// if (i == arr.length - 1) { //最后一个点
// context.lineTo(arr[0][0], arr[0][1]);
// } else {
// context.lineTo(arr[i + 1][0], arr[i + 1][1]);
// }
// }
// }
function DrawLine(arr,context) {
for(var d = 0; d < arr.length; d++){
var inArr = arr[d]['num'];
context.beginPath();
context.moveTo(inArr[0][0], inArr[0][1]);
/* 如果只是填充颜色,可以不管最后一个lineTo的点要回到圆点的事情。
context.moveTo(inArr[0][0], inArr[0][1]);
for (var i = 0; i < inArr.length; i++) {
context.lineTo(inArr[i][0], inArr[i][1]);
}
context.strokeStyle = arr[d]['color']; //填充颜色
context.stroke();
*/
/* 为了闭合图形(画线情况),你也可以判断最后一个点时,让他回到初始值。如下: */
for (var i = 0; i < inArr.length; i++) {
if (i == inArr.length-1) { //最后一个点
context.lineTo(inArr[0][0], inArr[0][1]);
} else {
context.lineTo(inArr[i+1][0], inArr[i+1][1]);
}
}
context.fillStyle = arr[d]['color'];
context.fill();//每次循环也要重新画一遍
context.lineWidth = 3;
context.strokeStyle = '#333';
context.stroke();//每次循环也要重新画一遍
}
} window.onload = function(){
var myCanvas = document.getElementById('canvas');
var context = myCanvas.getContext('2d');
var tangram = [{
name: '等腰三角形蓝',
num: [
[0, 0],
[250, 250],
[0, 500]
],
color: '#62d2ff'
},{
name: '等腰三角形绿',
num: [
[0, 0],
[500, 0],
[250, 250],
],
color: '#83ff93'
},{
name: '平行四边形',
num: [
[500, 0],
[500, 250],
[375, 375],
[375, 125]
],
color: '#ff8383'
},{
name: '黄三角',
num: [
[375, 125],
[375, 375],
[250,250]
],
color: '#fff56c'
},{
name: '橙黄三角',
num: [
[500, 250],
[500, 500],
[250, 500]
],
color: '#ffb542'
},{
name: '正方形',
num: [
[250, 250],
[375, 375],
[250, 500],
[125, 375]
],
color: '#f598e0'
},{
name: '紫色正方形',
num: [
[250, 500],
[125, 375],
[0, 500],
],
color: '#c673e6'
}];
DrawLine(tangram,context);
}
</script>
</body> </html>

canvas绘制七巧板源码

2018-09-21  15:54:56

canvas练习 - 七巧板绘制的更多相关文章

  1. -_-#【Canvas】导出在<canvas>元素上绘制的图像

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. Canvas 中drawImage 绘制不出图片

    在使用Canvas的drawImage绘制图片时,却发现绘制不出图片,原因是图片是异步加载,图片加载完再绘制. //html <img src="1.png" /> & ...

  3. canvas实现七巧板图案和粒子时钟

      canvas实现七巧板 <canvas id="canvas" width="800" height="800"></ ...

  4. canvas教程(二) 绘制直线

    经过 canvas 教程(一) 简介 我们知道了 canvas 的一些基本情况 而本次是给大家带来直线的绘制 canvas 中,基本图形有两种,一种是直线,还有一种是曲线 但是无论是直线还是曲线,我们 ...

  5. canvas教程(三) 绘制曲线

    经过 canvas 教程(二) 绘制直线 我们知道了 canvas 的直线是怎么绘制的 而本次是给大家带来曲线相关的绘制 绘制圆形 在 canvas 中我们可以使用 arc 方法画一个圆 contex ...

  6. Android中使用Canvas和Paint绘制一个安卓机器人

    场景 在Android中画笔使用Paint类,画布使用Canvas类来表示. 绘图的基本步骤 首先编写一个继承自View的自定义View类,然后重写其onDraw方法,最后把自定义的view添加到ac ...

  7. 基础canvas应用-钟表绘制

    首先,canvas语法基础薄弱的小伙伴请点这里,剩下的小伙伴们可以接着往下看了. 一个表,需要画什么出来呢:3条线(时分秒针),1个圆(表盘),以及60条短线/点(刻度). 嗯,没毛病. 那接下来让我 ...

  8. Android Canvas使用drawBitmap绘制图片

    1.基本的绘制图片方法 //Bitmap:图片对象,left:偏移左边的位置,top: 偏移顶部的位置 drawBitmap(Bitmap bitmap, float left, float top, ...

  9. android中Canvas使用drawBitmap绘制图片

    1.主要的绘制图片方法 //Bitmap:图片对象,left:偏移左边的位置,top: 偏移顶部的位置     drawBitmap(Bitmap bitmap, float left, float ...

随机推荐

  1. C# js 在页面能执行,放在单独js文件不能执行

    我们先来看看MVC中生成的 注意:url.Content 生成的路径 Html.ActionLink 与 Url.Action 1.两者者是根据给定的Controller,Action 生成链接, 但 ...

  2. ASP.NET 网站超时跳转到登录界面

    利用actionFilter过滤器实现,超时跳转到登录界面 /// <summary> /// 登录超时跳转至登录界面 /// </summary> public class ...

  3. EasyUI的combobox组件Chrome浏览器不兼容问题解决办法

    EasyUI版本:jQuery EasyUI 1.4.1 Chrome浏览器版本:41.0.2272.101 m 问题描述 在Chrome浏览器下,下拉框选择选项之后,选择的值在下拉框中不显示,重新选 ...

  4. QComboBox:类似于的百度的搜索提示

    参考: http://blog.csdn.net/lingchen214/article/details/17960789 http://blog.sina.com.cn/s/blog_a6fb6cc ...

  5. vegan 包进行Adonis 分析

    Adonis 分析 是基于距离矩阵的多变量方差置换分析, 代码示例: 默认使用bray 距离来计算样本间的距离矩阵 参考资料: https://www.rdocumentation.org/packa ...

  6. easyui分页,编辑datagrid某条数据保存以后跳转到某一页

    参考资料:http://caizhilin2010.iteye.com/blog/1731698 问题:商品列表页面采用easyui的datagrid展示数据,编辑某行数据保存以后,要求跳转到 用户在 ...

  7. linux将标准输出和标准错误输出都重定向到一个文件?

    需求描述: 今天在写crontab,里面有标准输出和错误输出,之前使用的是 > /dev/null 2>&1 那这个意思也就等同于将标准输出和错误输出都输出到/dev/null中, ...

  8. linux 使用supervisor来管理进程

    现在假设一个脚本是,hello.py,内容是 fo = open('xx.txt','w') while 1: fo.write('hello world') print('hi') time.sle ...

  9. IOS端的摇一摇功能

    //微信的摇一摇是怎么实现的~发现原来 ios本身就支持 //在 UIResponder中存在这么一套方法 - (void)motionBegan:(UIEventSubtype)motion wit ...

  10. ECharts 3 -- gauge表盘的配置项

    绘制一个简单的表盘图表 在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器. <body> <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM --& ...