canvas基础入门(二)绘制线条、三角形、七巧板
2024-08-30 14:19:35
复杂的内容都是有简单的线条结合而成的,想要绘制出复杂好看的内容先从画直线开始
canvas绘制直线先认识几个函数
beginPath();开始一条路径,或重置当前的路径
moveTo(x,y);用于规定直线的起点坐标
lineTo(x,y);用于规定直线的终点坐标
closePath();方法创建从当前点到开始点的路径
stroke();方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色
利用上面的函数就可以简单的画出直线了
代码
<canvas id="canvas" style="border: 1px solid #000;">当前浏览器不支持canvas,请更换浏览器再试</canvas>
<script type="text/javascript">
window.onload = function() { var canvas = document.getElementById("canvas");
canvas.width = 1024;//设置canvas宽高
canvas.height = 768;
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(100, 100);
context.lineTo(700, 700);
context.closePath();
context.stroke();
}
</script>
接下来个直线添加点样式:
lineWidth;属性设置或返回当前线条的宽度,以像素计
strokeStyle;属性设置或返回用于笔触的颜色、渐变或模式
fillStyle;属性设置或返回用于填充绘画的颜色、渐变或模式
fill();方法填充当前的图像(路径)。默认颜色是黑色
JavaScript代码如下:
<canvas id="canvas" style="border: 1px solid #000;">当前浏览器不支持canvas,请更换浏览器再试</canvas>
<script type="text/javascript">
window.onload = function() { var canvas = document.getElementById("canvas");
canvas.width = 1024;//设置canvas宽高
canvas.height = 768;
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(100, 100);
context.lineTo(700, 700);
context.closePath();
context.lineWidth = 5;
context.strokeStyle = "red";
context.stroke();
}
</script>
会绘制直线后我们接着来绘制一些图像,要绘制图像也是使用lineTo(x,y),绘制三角形,代码如下
<canvas id="canvas" style="border: 1px solid #000;">当前浏览器不支持canvas,请更换浏览器再试</canvas>
<script type="text/javascript">
window.onload = function() { var canvas = document.getElementById("canvas");
canvas.width = 1024;//设置canvas宽高
canvas.height = 768;
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(100, 100);
context.lineTo(700, 700);
context.lineTo(100, 700);
context.lineTo(100, 100);
context.closePath();
context.lineWidth = 5;
context.strokeStyle = "red";
context.stroke();
}
</script>
这个时候在是实现一些复杂的图像,七巧板:
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>canvas绘制七巧板</title>
</head> <body>
<canvas id="canvas" style="border: 1px solid #aa;display: block;margin: 50px auto;">
当前浏览器不支持Canvas,请更换浏览器再试
</canvas> <script type="text/javascript">
var tangram = [
{p: [{x: 0,y: 0}, {x: 800,y: 0}, {x: 400,y: 400}],color: "#caff76"},
{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.width = 800;
canvas.height = 800; var context = canvas.getContext("2d"); for(var i = 0; i < tangram.length; i++) {
draw(tangram[i], context)
}
} function draw(plece, cxt) {
cxt.beginPath();
cxt.moveTo(plece.p[0].x, plece.p[0].y);
for(var i = 1; i < plece.p.length; i++) {
cxt.lineTo(plece.p[i].x, plece.p[i].y);
}
cxt.closePath();
cxt.fillStyle = plece.color;
cxt.fill(); cxt.strokeStyle = "black";
cxt.lineWidth = 3;
cxt.stroke();
}
</script>
</body> </html>
最新文章
- iOS 打包iPa
- Jquey Form 异步提交文件参数并且在http 信息头header中加上一定参数
- JSP 九个隐含JSP对象
- Android 新版NDK环境搭建(免Cygwin)
- java參数传递机制浅析
- (第二章)Java并发机制的底层实现原理
- bat批量目光声明
- ASCII码对应表chr(9)、chr(10)、chr(13)、chr(32)、chr(34)、chr(39)
- 使用H2数据库进行单元测试
- C标准库函数中复杂的函数声明
- Java应用开发的一条重要经验:先建立基础设施
- EsayUI + MVC + ADO.NET(仓储基础接口)
- CodeForces760A
- Linux XOR.DDoS样本取证特征与清除
- iOS:NSBundle的具体介绍
- MVC Razor与javascript混编(js中嵌入razor)
- hdu 1026 Ignatius and the Princess I 搜索,输出路径
- 关于监听与控制设备旋转全解析(UIDeviceOrientationDidChangeNotification)
- HTTPS服务器配置
- SIM800L透传模式配置
热门文章
- ZROI2018普转提day2t3
- ZROI2018提高day1t2
- hmset()
- 开源PCRF、PCRF体验与PCRF实现
- yzm10的小简介
- jquery(&#39;tr&#39;,&#39;div&#39;)和jquery(&#39;tr,div&#39;)
- AttributeError: ‘module’ object has no attribute ‘ximgproc’(OpenCV)
- CloudStack网络概念
- 【bzoj1030】: [JSOI2007]文本生成器 字符串-AC自动机-DP
- 主要介绍JavaEE中Maven Web 项目的结构及其它几个小问题