canvas
来源:互联网 发布:sql语句美化小工具 编辑:程序博客网 时间:2024/06/08 19:28
从接触前端开始,个人钟爱canvas,对于钟爱的技术,我竟然在某电话面试上竟然一紧张,竟然忘记了获取画布。所以还是整理一下。
1.获取画布:
var canvas=getElementById("id");
2.获取画笔
var con =canvas.getContext("2d");//似乎木有见过3d
3.开始画图:
con.fillStyle=color|gradient|pattern;//充绘画的颜色、渐变或模式。con.strokeStyle=color|gradient|pattern;//边框颜色、渐变或模式。
画矩形:
con.fillRect(x1, y1, heigh, width);//绘制空心矩形con.strokeRect(x2, y2, heigh, width);//绘制实心矩形
画线:
con.beginPath();//开始con.lineWidth="5";//宽度5像素con.strokeStyle="red"; // 红色路径con.moveTo(0,75);//起点con.lineTo(250,75);//终点con.stroke(); // 进行绘制
画圆: con.arc(x, y, radius, startAngle, endAngle, anticlockwise)
(x,y);圆心,
radius:半径
startAngle:开始的角度
endAngle:结束的角度,
anticlockwise:是否逆时针(可省)
con.arc(20,20,10,0,Math.PI*2);//半径为10的整圆
渐变色:
createLinearGradient(0,0,0,170)//渐变的开始点和结束点addColorStop(stop,color);//渐变色结束的位置(0-1)和颜色fillstyle=gradient;
var grad=ctx.createLinearGradient(0,0,0,170);grad.addColorStop(0,"black");grad.addColorStop(1,"white");ctx.fillStyle=grad;
效果图:
0 0
- Canvas
- Canvas
- canvas
- Canvas
- Canvas
- canvas
- Canvas
- canvas
- Canvas
- Canvas
- canvas
- canvas
- Canvas
- canvas
- canvas
- Canvas
- Canvas
- canvas
- 02-线性结构1 两个有序链表序列的合并
- 用PPT绘制示意图
- C++的运算符重载
- 最长上升子序列n log n
- SIGCHLD信号处理
- canvas
- 使用python读取大文件
- 转方阵
- 【 UITextField】- 文本框
- 二叉树遍历方式的转化(递归写法)
- PYTHON学习之路一:WEB开发
- python中range()函数的用法--转载
- [译]MVC or MVP Pattern – Whats the difference?
- 记一个JSON解析,客户端,服务端