canvas绘制七巧板

最新推荐文章于 2021-07-03 15:08:08 发布
最新推荐文章于 2021-07-03 15:08:08 发布
阅读量1.3k 收藏 2
点赞数
分类专栏： html5 文章标签： html5 canvas 绘制七巧板
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_21206105/article/details/54601343
版权

今天来学下canvas，难度：1星；题目：canvas绘制七巧板

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>七巧板绘制</title>
</head>
<body>
	<canvas id="canvas" style="border:1px solid #eee;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.οnlοad=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(ps,ctx){
		  		ctx.beginPath();
		  		ctx.moveTo(ps.p[0].x,ps.p[0].y);
		  		for(var i=0;i<ps.p.length;i++)
		  			ctx.lineTo(ps.p[i].x,ps.p[i].y);

		  			ctx.closePath();
		  			ctx.fillStyle=ps.color;
		  			ctx.fill();
		  		
		  }
		    
		
	</script>
</body>
</html>

canvas绘制七巧板

仰望星空的包子
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas绘画七巧板
weixin_47000135的博客
07-27 350
个人刚开始学canvas： 第一：获取canvas标签： document.getElementById(‘canvas’) 第二：创建 context 对象，canvas.getContext(‘2d’),该对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法 第三开始绘画：context.moveTo(x,y),这是起始坐标 contextLineTo(x,y)，这是线条终点坐标 在同一个canvas要花两个图形的时候要用 context.beginPath() con.
canvas 绘制七巧板
韩爽的博客
07-07 986
如图, 给出七巧板的个点坐标, 接下来, 通过canvas来绘制这样一个七巧板图形
2.canvas画七巧板
burningdzb的博客
03-19 318
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <canvas id="canvas" width="1024" he...
canvas七巧板
大白的博客
06-27 1504
使用canvas简单编写七巧板最近在学习canvas，目前还只是简单的了解了一下canvas画图的原理和简单图形的绘画。看到网上有很多canvas画的七巧板，但是并没有实现可以移动、拖拽和旋转拼接的demo，所以自己就利用js加上简单的canvas来实现一下。原理七巧板说白了也就是七块不同的多边形，要么是三角形，要么是四边形：如下图 我们可以通过数组现将七巧板的每一块先画出来： //把7个点的位
html5 canvas绘制七巧板图形代码
11-06
总结来说，HTML5 Canvas绘制七巧板图形涉及到HTML和JavaScript的基本语法，Canvas API的使用，以及一些基本的几何和数学知识。通过这样的项目，你可以深入理解Canvas绘图原理，同时锻炼到编程逻辑和问题解决能力。
HTML5 canvas绘制七巧板代码
05-01
这个"HTML5 canvas绘制七巧板代码"实例，旨在教你如何利用canvas API来实现七巧板的绘制，这对于理解canvas的基本用法以及图形学原理非常有帮助。 首先，我们需要在HTML文件中创建一个canvas元素，并为其指定一个ID...
HTML绘制七巧板,canvas绘制七巧板
weixin_42139460的博客
07-03 483
> 脚本语言 > >canvas绘制七巧板2017-04-19 14:10　出处：清屏网　人气：在上一节中，我们了解了如何使用canvas绘制线段，这一节，我们使用canvas绘制七巧板。html代码如下所示,和第一节中代码一致：==>#canvas{border: 1px solid #aaa;text-align: center;}=="800">当用户浏览器不支持C...
Canvas学习记录绘制七巧板(01)
qq_30675311的博客
01-08 364
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; margin: 0; } #canvas { border: 1p
canvas画七巧板
12-19
使用html5的canvas技术画的七巧板，内有注释，简明易懂
HTML5 canvas绘制七巧板代码.zip
07-04
HTML5 canvas绘制七巧板代码，代码有详细中文注释。
Canvas之画七巧板
用法之妙，存乎一心。
10-25 2102
Canvas绘图是基于状态的！
[js高手之路] html5 canvas教程 - 绘制七巧板
weixin_34290631的博客
10-08 273
七巧板长什么样？ 用canvas把他画出来，其实就是把这7个区域的图形，每个点的坐标找出来，再用moveTo, lineTo连线，设置不同的颜色即可。 1 &lt;head&gt; 2 &lt;meta charset='utf-8' /&gt; 3 &lt;style&gt; 4 #canvas { 5 bor...
canvas-画七巧板
weixin_33834628的博客
08-29 89
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keyword...
canvas 入门－利用 canvas 制作一个七巧板
weixin_34367845的博客
07-13 305
简介 <canvas> 是 HTML5 新增的元素之一，它允许脚本语言动态渲染位图像。最初是由 Apple 引入，用于 Mac OS X 的仪表盘，后来又在 Safiri 和 Google Chrome 中被实现。 <canvas> 就像个神奇的画布，你可以在上面画出你想要的绚丽的效果。使用<canvas&...
canvas基础知识及七巧板绘制实例
小白努力走
11-04 2772
先介绍常用基础知识： window.onload()=function(){ var canvas=document.getElementById("canvas");            //获取元素 var context=canvas.getContext("2d");//绘制上下文环境，绘制所需接口 context.moveTo(100,100);          
canvas绘制二维码
最新发布
03-01
Canvas是HTML5提供的一个绘图API，可以用来在网上绘制图形、动画和其他视觉效果。要使用Canvas绘制二维码，可以借助第三方库QRCode.js来生成二维码图像数据，然后将图像数据绘制到Canvas上。 以下是使用Canvas绘制二维码的骤： 1. 引入QRCode.js库：在HTML文件中引入QRCode.js库，可以通过CDN链接或者本地文件引入。 2. 创建Canvas元素：在文件中创建一个Canvas元素，可以通过id属性指定一个唯一的标识符。 3.Canvas上下文：使用JavaScript代码获取Canvas元素的上下文，可以通过getContext('2d')方法获取2D绘图上下文。 4. 二维码图像数据：使用QRCode.js库生成二维码图像数据，可以通过调用QRCode的构造函数并传入相关参数来。 5. 绘制二维码：使用Canvas的绘图API，在Canvas上下文中调用相关方法来绘制二维码图像数据。 以下是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <title>Canvas绘制二维码</title> <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/qrcodejs/1.0.0/qrcode.min.js"></script> </head> <body> <canvas id="qrcodeCanvas" width="200" height="200"></canvas> <script> // 获取Canvas上下文 var canvas = document.getElementById('qrcodeCanvas'); var context = canvas.getContext('2d'); // 生成二维码图像数据 var qrcode = new QRCode(canvas, { text: 'https://www.example.com', // 二维码内容 width: 200, // 二维码宽度 height: 200 // 二维码高度 }); // 绘制二维码 context.drawImage(qrcode._el.firstChild, 0, 0); </script> </body> </html> ``` 以上代码中，我们首先引入了jQuery和QRCode.js库。然后创建了一个Canvas元素，并通过id属性指定了一个唯一的标识符。接着使用JavaScript代码获取了Canvas元素的上下文。然后使用QRCode.js库的构造函数生成了二维码图像数据，并传入了相关参数。最后使用Canvas的绘图API，在Canvas上下文中调用drawImage方法将二维码图像数据绘制到Canvas上。 希望以上内容能够帮助到你！如果有任何问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值