其他相关canvas绘制属性
来源:互联网 发布:h5 微信订餐系统源码 编辑:程序博客网 时间:2024/05/18 19:37
绘制文字
fillText(text,x,y,[maxWidth]);
strokeText(text,x,y,[maxWidth]);
其中,text参数表示是要绘制的文字,x,y是绘制文字的起始横纵坐标。maxWidth是可选参数,表示显示文字时的最大宽度。
区别:fillText是填充方式绘图,strokeText是轮廓方式绘图。
在绘图之前可以设置样式,比如设置字体颜色,字体格式,以及水平垂直对齐方式。
ctx.fillStyle = “bule”;
ctx.font = “italic 30px sans-serif”;
ctx.textAlign= ‘center’;
ctx.textBaseline = ‘top’;
简单动画的制作
Canvas画布中制作的动画,实际上是一个不断擦除,重绘,擦除,重绘的过程。
第一:预先编写好用来绘制的函数,并在函数中用clearRect()方法将画布整体或者局部擦除。
第二:使用setInterval(drawFuntion(),time)方法设置动画间隔时间,其中drawFuntion()方法是绘图函数,time是动画间隔时间。
绘制矩形
clearRect(x,y,width,height);//将指定矩形区域中的图形进行擦除
fillRect(x,y,width,height);//填充指定矩形区域中的图形
strokeRect(x,y,width,height);//绘制带边框的指定区域中的图形
绘制圆形
步骤:
1) 开始创建路径
2) 创建图形的路径
3) 路径创建完成后关闭路径
4) 设置绘图样式,调用绘制方法绘制路径
ctx.beginPath();
ctx.arc(startX,startY,radius,startAngle,endAngle,false);//最后一个参数如果为true,按逆时针方向绘制,如果为false按顺时针方向绘制
ctx.closePath();
ctx.fillStyle=’rgba(255,0,0,0.25)’;
ctx.fill();
绘制直线
方法:
moveTo(x1,y1),起始位置横纵坐标。
lineTo(x2,y2),终点位置横纵坐标。
属性:
lineCap:
1) butt 不为直线添加线帽
2) round 为直线添加圆形线帽
3) square 为直线添加方形线帽
lineJoin:两条直线交汇时的拐角形状
1) miter 尖角拐角
2) round 圆角拐角
3) bevel 斜角拐角
setLineDash:设置虚线形状,奇数表线段长度,偶数表示线段与线段之间的距离
setLineDash([5]);线段长度为5,线段与线段之间的距离为5
setLineDash([5,10]);线段长度为5,线段与线段之间的距离为10
setLineDash([5,10,15]);//浏览器自动复制数组数量为偶数倍,[5,10,15,5,10,15]。setLineDash([5,10,15,20]);
- 其他相关canvas绘制属性
- Canvas相关的绘制
- android canvas paint绘制相关图形
- canvas绘制
- Canvas绘制
- Android自定义控件绘制流程与Paint, Canvas相关API
- Canvas---Canvas绘制钟表,仪表盘
- View.onDraw(Canvas canvas)绘制
- canvas相关
- canvas 属性
- 理解表格二:其他表格相关标签及属性
- Android页面布局之其他布局相关属性
- 【Html5】canvas绘制圆形
- html5 canvas 绘制钟表
- Android Canvas 图形绘制
- HTML Canvas 绘制五角星
- canvas 绘制图形1
- canvas 绘制图形2
- 九、使用SharedPreferences进行数据存储
- 日志2016.10.31i
- 数据结构第五次作业(图的基本操作实现)
- matlab 中 mvnrnd 函数用法及举例
- SED与AWK命令攻略大全
- 其他相关canvas绘制属性
- C语言之找出字符串中的字串
- Power Strings(kmp next求循环节)
- 用数组实现整数集合
- poj1390 Blocks
- 数据库的基本概念
- (一)React Native---FlexBox 布局
- java学习中重写与重载方法的区别
- 10.31编程总结