canvas的一些小知识点
来源:互联网 发布:小漠淘宝店 编辑:程序博客网 时间:2024/04/29 16:59
canvas啊真是一个虐心又好用的东西,俗称为画板,在纸上画画不止一次,但是在电脑的画板上真心不是用笔那么简单的啊.....
接下来,不多说废话 来给告诉大家一些基础知识吧
//画直线
第一步:开始路径
ctx.beginPath();
第二步:设置起点
ctx.moveTo(100,100);
第三步:设置终点
ctx.lineTo(200,300);
修改线的颜色
ctx.strokeStyle = "blue";
修改线宽
ctx.lineWidth = 30;
第四步:绘制(修改颜色放在绘制下面是为了下一次的绘制)
ctx.stroke();
//画三角
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(100,300);
ctx.lineTo(300,300);
闭合路径
ctx.closePath();
ctx.lineWidth = 20;
ctx.stroke();
填充(填充的是上一个闭合的图画并且会占这个图画线宽的一半)
设置填充颜色
ctx.fillStyle = "red";
进行填充
ctx.fill();
//1.空心矩形
ctx.strokeStyle = "orange";
ctx.strokeRect(100,100,100,100);
//实心矩形
ctx.fillStyle= "deeppink";
ctx.fillRect(100,100,100,100);
//画圆
//参数一:圆心x坐标
//参数二:圆心y坐标
//参数三:半径
//参数四:起始弧度
//参数五:结束弧度 Math.PI(180度)
//参数六:false(顺时针) true(逆时针)
ctx.arc(100,100,100,0,Math.PI,false);
ctx.closePath();
ctx.stroke();
椭圆采用了网上的一个简单的函数直接调用就好的function EllipseOne(context,x, y, a, b) {
varstep = (a > b) ? 1 / a : 1 /b;
context.beginPath();
context.moveTo(x+ a, y);
for(vari = 0; i < 2 * Math.PI; i += step) {
context.lineTo(x+ a * Math.cos(i), y + b * Math.sin(i));
}
context.closePath();
context.fill();
}
- canvas的一些小知识点
- RSS的一些小知识点
- JSP的一些小知识点
- Android的一些小知识点
- 一些有用的小知识点
- java的一些小知识点
- C++的一些小知识点
- Javascript的一些小知识点
- AFNetworking的一些小知识点
- jquery的一些小知识点
- 一些小知识点的累积
- c++的一些小知识点
- android的一些小知识点
- 整理的一些小知识点
- 整理的一些小知识点
- C++ 一些小的知识点
- 总结的一些小知识点
- Android 小笔记 一些小的知识点
- 9.Cent OS 服务器安装Laravel项目权限问题
- <<重构改善既有的代码设计>>第2章
- 笔试笔记————乱序同构
- JMS消息传送机制ActiveMQ
- 在VS2010中基于对话框显示彩色和深度图并匹配骨骼图
- canvas的一些小知识点
- oracle initialization or shutdown in progress解决方法
- LeetCode 404. Sum of Left Leaves
- HDU 3555 Bomb题解(数位dp)
- HTML5学习_day10(3)--兼容性概念
- 记忆收获的每一天
- javascript实现读秒跳转的两种方法
- 百度地图实现简单的定位功能
- 总结11