其他相关canvas绘制属性
2016-10-31 21:46
260 查看
绘制文字
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]);
相关文章推荐
- 绘制六芒星战斗力属性图 —— h5 canvas 初体验
- canvas绘制圆、渐变、字体和图片及其他
- 如何设置一个style做一个属性触发去改变其他的属性值<style的相关内容>?
- 其他样式相关的属性
- [前端] canvas绘制圆、渐变、字体和图片及其他
- 使用R语言绘制其他图形之相关系数图
- Canvas相关的绘制
- canvas绘制字体-属性设置3
- 使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
- android canvas paint绘制相关图形
- silverlight 绘制Ellipse以及Ellipsede一些相关属性
- canvas绘制字体-属性设置1
- canvas绘制字体-属性设置2
- 理解表格二:其他表格相关标签及属性
- Android自定义控件绘制流程与Paint, Canvas相关API
- javascript基础(样式的操作,浏览器兼容样式操作,其他的样式相关属性,滚动的样式)(三十)
- Canvas标签用来绘制图像会使用到的方法和属性
- Android页面布局之其他布局相关属性
- [C#][SAMPLE][CODE][Control]RichTextBox以及相关常见属性