Canvas API
来源:互联网 发布:平板软件市场hd 编辑:程序博客网 时间:2024/05/01 09:41
使用Canvas进行图形绘制步骤:
1、获取Canvas对象;
2、从Canvas对象获取上下文;
3、使用上下文方法和属性进行绘制。
指定颜色方法:
1、以[#RRGGBB]方法指定:ctx.fillStyle = "#FF0000F" ;
2、以rbg()指定,0~255范围:ctx.fillStyle = "rbg(255,0,0)" ;
3、同时指定透明度rbga(),透明度0~1的范围:ctx.fillStyle = "rbga(255,0,0,0.5)" ;
绘制路径:
1、取得上下文;
2、调用beginPath()方法开始;
3、调研moveTo()和lineTo()绘制和移动;
4、调研closePath()关闭路径绘制;
5、调研fill()方法进行图形绘制。
绘制圆弧:
arc方法:context.arc(x, y, 半径, 开始角度, 结束角度, 是否逆时针旋转) ;
arcTo方法:context.arcTo(x1, y1, x2, y2, 半径) ;
rect方法绘制矩形:context.rect(x, y, 宽度, 高度) ;
绘制图像:
1、读取图像文件;
2、进行绘制;
var image = new Image() ;
image.src = "url" ;
image.onload = function() {
context.drawImage(image,dx,dy) ; //把图像绘制在dx、dy
context.drawImage(image,dx,dy,dw,dh) ; //从原图dx、dy截取dw、dy
context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh) ; //原图的sx、sy开始截取sw、sy绘制到dx、dy,宽高维dw、dh
}
变形方法:
变形矩阵指定(清空先前的):setTransform(m11,m12,m21,m22,dx,dy) ;
变形矩阵指定(可重复选定):transform(m11,m12,m21,m22,dx,dy) ;
旋转:rotate(angle) ;
扩大/缩小:scale(x,y) ; //x,x轴比例,y,y轴比例
移动/变形:translate(x,y) ; //移动后坐标
- Canvas API
- Canvas API
- Canvas API
- Canvas API
- Canvas API
- Canvas API
- Canvas API
- Canvas API
- Canvas API
- Canvas---HTML5 Canvas API详解
- Canvas+Api整理
- HTML5: Canvas API
- HTML5:canvas API
- canvas js API
- Canvas API初步学习
- android[api] canvas.saveLayerAlpha
- HTML5程序设计 Canvas API
- canvas game API
- Qt实现窗口自动隐藏
- Winfrom c# 两个ComboBox互相联动
- struts2 访问静态常量,静态方法
- linux下vim命令详解
- iBatis配置详解
- Canvas API
- 作为软件工程师,你必须知道的20个常识
- Qt实现当鼠标移动到窗体上,窗体由半透明变为不透明
- POJ 2255 Tree Recovery
- java中equals和==的区别
- 在Extjs Grid扩展一个链接按钮列
- Qt实现右键快捷菜单
- 万恶的sync-binlog=1
- C# ListView控件的使用方法 简介