Html5画布绘制七巧板

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>绘制七巧板</title>
</head>
<body>
<div style="margin:0 auto;width:600px;height:auto;text-align:center">
<canvas id="myCanvas" width="600" height="600" style="display:block;margin:50px auto"></canvas>
</div>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//开始绘制
ctx.beginPath();
//第一个三角形
//绘制的基点
ctx.moveTo(0,0);
//绘制从前一点到这点的直线
ctx.lineTo(300,300);
ctx.lineTo(0,600);
ctx.closePath();//填充或闭合需要先闭合路径才能画
//空心三角形
//ctx.strokeStyle="#ff7900"
//ctx.stroke();
//实心三角形
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,300);
ctx.lineTo(0,600);
ctx.closePath();
ctx.fillStyle='rgba(200,0,0,0.5)';
ctx.fill();

//第二个三角形
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,0);
ctx.lineTo(150,150);
ctx.closePath();
ctx.fillStyle='rgba(255,121,0,0.5)';
ctx.fill();

//第三个三角形
ctx.beginPath();
ctx.moveTo(300,0);
ctx.lineTo(600,0);
ctx.lineTo(600,300);
ctx.closePath();
ctx.fillStyle="rgba(255,0,0,0.5)";
ctx.fill();

//第四个三角形
ctx.beginPath();
ctx.moveTo(0,600);
ctx.lineTo(600,600);
ctx.lineTo(300,300);
ctx.closePath();
ctx.fillStyle="rgba(3,165,72,0.5)";
ctx.fill();

// 第五个三角形
ctx.beginPath();
ctx.moveTo(300,300);
ctx.lineTo(450,150);
ctx.lineTo(450,450);
ctx.closePath();
ctx.fillStyle="rgba(46,180,255,0.5)";
ctx.fill();
// 正方形
ctx.beginPath();
ctx.moveTo(300,0);
ctx.lineTo(450,150);
ctx.lineTo(300,300);
ctx.lineTo(150,150);
ctx.closePath();
ctx.fillStyle="rgba(255,245,0,0.5)";
ctx.fill();

// 平行四边形
ctx.beginPath();
ctx.moveTo(600,600);
ctx.lineTo(600,300);
ctx.lineTo(450,150);
ctx.lineTo(450,450);
ctx.closePath();
ctx.fillStyle="rgba(100,0,196,0.5)";
ctx.fill();
</script>
</body>
</html>

Html5画布绘制七巧板相关推荐

html5贝塞尔,使用HTML5画布绘制贝塞尔曲线
是的,请使用HTML canvasbezierCurveTo()方法在HTML5中绘制Bezier曲线. 示例您可以尝试运行以下代码以使用画布绘制贝塞尔曲线:HTML> #test { wid ...
Three.js 粒子系统动画与发光材质——利用HTML5画布绘制
用Three.js做了个字体的粒子系统动画,且`自定义性`极高,设置speedX=speedY=speedZ=1000的参数,截图如下: 预览地址:https://joeoeoe.github.io/ ...
html5 画布绘制时钟
用Html5实现时钟,包括转盘时钟和电子时钟,显示当前日期时间绘制步骤: (1)先获取画布,设置画布的大小: (2)在js中获取画布对象,获取画布的画笔对象,设置画笔的一些属性: (3)获取系统当前 ...
如何用html5绘制圆形图片,javascript – 如何使用html5画布绘制连续的圆形图案
我有这个图像: 我想用图像作为模式绘制.当我在画布上得到一个像这样的结果: 但我需要输出所以我的问题是: JS var source, source_ctx, sleeve, sleeve_ctx, ...
html5画布绘制微信logo,HTML5新特性之用SVG绘制微信logo
HTML5新特新 HTML5 中的一些有趣的新特性: 1.用于绘画的 canvas 元素 2.用于媒介回放的 video 和 audio 元素 3.对本地离线存储的更好的支持 4.新的特殊内容元素,比 ...
html 绘制正方形,使用HTML5画布绘制正方形
打开记事本写下以下代码: var square=a.getContext("2d");//这里通过square获取处理API的上下文contextsquare.beginPath( ...
用html5写一段文字画布中,超全的HTML5画布（Canvas)实例
1.环行进端处触码通法果泉位可近境其行框理发HTML5专门为画布功能提供的标签:,所以画布相关的功能都是基于这个标签来完览页些求时是过解些这确如目前例总站回广随能4果泉时标配使能幻近器面实的我是接,前 ...
用html5的canvas画布绘制贝塞尔曲线
查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
html5画布画点,在HTML5画布上绘制一个点
6 个答案: 答案 0 :(得分:141) 如果您打算绘制大量像素,使用画布的图像数据进行像素绘制会更有效率. var canvas = document.getElementById("m ...

Html5画布绘制七巧板

Html5画布绘制七巧板相关推荐

最新文章

热门文章