canvas绘制七巧板
效果如下所示：
代码分享：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas七巧板</title>
</head>
<body>
<canvas id="canvas" style=" border: 1px solid #aaa;display:block;margin:50px auto;"></canvas>
<script type="text/javascript">
var tangram = [
{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:'#caff67'},
{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
canvas.width = 800;
canvas.height = 800;
// 定义画布的宽高
var context=canvas.getContext('2d');
// 创建画布
for( var i=0; i<tangram.length; i++){
draw(tangram[i],context);
// 遍历数组tangram执行函数draw
}
// draw这个函数
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++)
// 遍历数组中的p属性
cxt.lineTo(piece.p[i].x , piece.p[i].y);
// 画路径到这个坐标
cxt.closePath();
// 关闭这条打开的路径
cxt.fillStyle = piece.color;
cxt.fill();
// 给绘制的形状填充颜色
}
}
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持小牛知识库！
-
在这个例子中我们将使用画布（Canvas）创建一个简单的绘制程序。 在我们场景的顶部我们使用行定位器排列四个方形的颜色块。一个颜色块是一个简单的矩形，使用鼠标区域来检测点击。 Row { id: colorTools anchors { horizontalCenter: parent.horizontalCenter
-
本文向大家介绍canvas绘制表盘时钟，包括了canvas绘制表盘时钟的使用技巧和注意事项，需要的朋友参考一下 话不多说，请看代码： 以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持呐喊教程！
-
本文向大家介绍canvas 绘制圆形时钟，包括了canvas 绘制圆形时钟的使用技巧和注意事项，需要的朋友参考一下 效果如下： 代码如下： 以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持呐喊教程！
-
在PhotoShop中有专门的效果工具，Canvas也提供了一些基本的效果接口。这种效果在画布中实现是很简单的，特别是现在你已经掌握了像素的操作方法。 反转颜色 这个效果将反转图像的颜色值。基本方法就是用255减去像素现在的颜色值(150)，所得的就是反转后的颜色(255-150=105)。 让我们尝试一些不同的操作，然后看看最后的代码，这里并没有新知识。 var image = new Ima
-
前面我们讲解了如何创建图形（shape）以及加载图像（image），这一节我们讲述如何通过像素操作从零开始创建图像。 要创建一些像素，需要调用2D渲染上下文的createImageData 方法。通过传入宽度和高度，它会返回一个包含所有常规属性的ImageData对象：width、height和（最重要的）data。data属性所包含的CanvasPixelArray 将保存新的像素，此时它们是不
-
Canvas不仅能绘制图形，还能够显示文本。与使用传统的HTML元素（如p元素）创建文本相比，使用Canvas绘制文本通常并不是好方法，原因如下： Canvas中的文本是以图像形式绘制的，这意味着它无法像HTML文档中的普通文字一样用鼠标指针选取——它实际上不是文本，只是像文本而已。一旦文字绘制之后，它就无法编辑，除非先擦除文字，再重新绘制。在Canvas中绘制文本的好处是你可以利用Canvas支