HTML5学习笔记之canvas
来源:互联网 发布:淘宝活动代报 编辑:程序博客网 时间:2024/05/23 00:39
标签
canvas标签有一个默认宽高:300*150;
canvas的宽高一般写到行间样式中,写在style会有问题详细请看这里;
绘制环境
要绘图先要获取到绘制环境:
var oC = document.getElementsByTagName('canvas')[0];var oGC = oC.getContext('2d'); //有些浏览器支持webgl,可以绘制3D;
绘制方块
- fillRect(Left,Top,Width,Height) : 填充方块,默认颜色黑色
- strokeRect(Left,Top,Width,Height) : 带边框的方块,默认一像素的黑色边框 (默认下会渲染成两像素,解决办法)
在Context对象下使用:
//接上面代码oGC.fillRect(50,50,100,100);oGC.strokeRect(50,50,100,100);
注意:绘制是有顺序的,后面的绘制会覆盖前面的。
设置绘图
- fillStyle : 填充颜色
- lineWidth : 线宽度(数值)
- strokeStyle : 边框颜色
同样需要在Context对象下使用:
//接上面代码oGC.fillStyle = 'red';oGC.strokeStyle = 'blue';oGC.lineWidth = 10;
边界绘制
- lineJoin : 边界连接点样式
- lineCap : 端点样式
绘制路径
- beginPath : 开始绘制路径
- closePath : 结束绘制路径
- moveTo : 移动到绘制的新目标点
- lineTo : 新的目标点
- stroke : 画线,默认黑色
- fill : 填充,默认黑色
- rect : 矩形区域
- clearRect : 删除一个画布的矩形区域
- save : 保存路径
- restore : 恢复路径
绘制圆
- arc(x,y,半径,起始弧度,结束弧度,旋转方向)
- x,y :起始位置
绘制其他曲线
- acrTo(x1,y1,x2,y2,r)
- 第一组坐标,第二组坐标,半径
- quadraticCurveTo(dx,dy,x1,y1)
- 贝塞尔曲线:第一组控制点,第二组结束坐标
- bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1)
- 贝塞尔曲线:第一组控制点,第二组控制点,第三组结束坐标
变换
- translate : 偏移,从起始点为基准点,移动当前坐标位置
- rotate : 旋转
- scale : 缩放
像素
- createImageData(w,h) : 生成新的像素矩阵,初始值是全透明的黑色
- putUmageData(要设置的图像数据,x,y) : 设置新的图像数据
- getImageDate(x,y,w,h) : 获取图像数据
- getImageDate下的属性
- width : 一行的像素个数
- height : 一列的像素个数
- data : 一个数组,包含每个像素的rgba四个值,注意每个值都在0~255之间的整数
合成
- 全局阿尔法值:globalAlpha
- 覆盖合成:globalCompositeOperation,它下面有一堆东西
将画布导出为图像
- toDataURL
- 火狐下右键可以直接导出成图片
事件操作
- isPointInPath:用来判断是否在点击范围内,只是针对最后绘制的图形
阅读全文
0 0
- HTML5学习笔记之canvas
- HTML5学习笔记之canvas绘制圆形
- html5 canvas 学习笔记
- html5学习笔记 -- canvas
- HTML5学习笔记------Canvas
- html5 canvas 学习笔记
- HTML5学习之-Canvas
- HTML5 Canvas知识点学习笔记
- HTML5学习笔记-canvas 标签
- HTML5----Canvas 学习笔记一
- 【HTML5学习笔记】画布Canvas
- 初学html5 <canvas>学习笔记
- html5学习笔记之四(canvas对象)
- HTML5学习笔记之使用canvas绘制矩形
- DayDayUP之HTML5学习笔记五---Canvas简单的使用
- HTML5 Canvas学习笔记之详解弧线的绘制
- Html5 Canvas初探学习笔记(6) -变换
- Html5 Canvas初探学习笔记(7) -合成
- Regular Expression学习笔记
- CSS3学习笔记
- linux tar压缩解压命令
- window下Jekyll建站过程
- php 使用composer phpmailer发送qq邮件
- HTML5学习笔记之canvas
- SQL GUID和自增列做主键的优缺点
- HTML5学习笔记
- Tensorflow 实战--黄文坚 高清完整PDF及python代码
- SL代码生成配置
- 为什么canvas宽高要设置在标签内>>宽高设置在style和设置在canvas的区别
- python 中对配置文件的解析 ConfigParser & ConfigObj
- 关于beginPath()和closePath()的关系>>canvas的beginPath和closePath分析总结,包括多段弧的情况
- angular2入门简介