HTML5 Canvas标签总结
2016-12-27 11:39
218 查看
<canvas id="myCanvas" width="200" height="100"></canvas>
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
填充的矩形:
context.fillStyle = "#ff00ff"; //填充颜色
context.fillRect( x , y , width , height );
画直线:
context.moveTo( x , y ); // 起点
context.lineTo( x , y ); // 终点
context.stroke(); // 沿路径绘制直线
轮廓的矩形:
context.strokeStyle = "#ff00ff"; //填充颜色
context.strokeRect( x , y , width , height );
绘制圆:
context.beginPath(); //开始绘制路径
context.arc( x , y , radius , startAngle , endAngle
, anticlockwise); //开始绘制路径,(x , y )起点;radius半径;startAngle
开始角度;endAngle 结束角度;anticlockwise是否按顺时针方向绘制(true/false)
context.closePath(); //结束绘制路径
清空画布:context.clearRect( x , y , width , height );
保存Canvas状态:context.save();
恢复Canvas状态:context.restore();
移动坐标空间:context.translate( dx , dy );
以原点为中心旋转Canvas:context.rotate(angle);
增减Canvas对象中像素数目(缩放):context.scale( x , y );
两个图案叠加情况:context.globalCompositeOperation = "sourse-over";
source-over destination-over
source-atop destination-atop
source-in destination-in
source-out destination-out
var ctx = document.getElementById('myCanvas').getContext('2d');
ctx .clip(); //裁切路径
ctx.lineWidth = value; //线条粗细
ctx.lineCap = type; //线条两端样式
ctx.lineJoin = type; //两线段连接处样式
ctx.miterLimit= value; //绘制交点方式
线性渐变:
var lingrad = ctx.createLinearGradient( 0 , 0
, 0 , 200 );
//( 0,0)渐变起点,( 0,200)渐变终点
lingrad.addColorStop( 0 , '#ff0000'); //定义色标位置及上色
径向渐变:
var radialgradient = ctx.createRadialGradient( 100,100,30,100,100,200);
//(100,100)原点1,30半径1; (100,100)原点2,200半径2
阴影:
context.shadowOffsetX = float; //阴影水平偏移
context.shadowOffsetY
= float; //阴影垂直偏移
context.shadowBlur
= float; //阴影羽化程度
context.shadowColor
= color; //阴影颜色
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
填充的矩形:
context.fillStyle = "#ff00ff"; //填充颜色
context.fillRect( x , y , width , height );
画直线:
context.moveTo( x , y ); // 起点
context.lineTo( x , y ); // 终点
context.stroke(); // 沿路径绘制直线
轮廓的矩形:
context.strokeStyle = "#ff00ff"; //填充颜色
context.strokeRect( x , y , width , height );
绘制圆:
context.beginPath(); //开始绘制路径
context.arc( x , y , radius , startAngle , endAngle
, anticlockwise); //开始绘制路径,(x , y )起点;radius半径;startAngle
开始角度;endAngle 结束角度;anticlockwise是否按顺时针方向绘制(true/false)
context.closePath(); //结束绘制路径
清空画布:context.clearRect( x , y , width , height );
保存Canvas状态:context.save();
恢复Canvas状态:context.restore();
移动坐标空间:context.translate( dx , dy );
以原点为中心旋转Canvas:context.rotate(angle);
增减Canvas对象中像素数目(缩放):context.scale( x , y );
两个图案叠加情况:context.globalCompositeOperation = "sourse-over";
source-over destination-over
source-atop destination-atop
source-in destination-in
source-out destination-out
var ctx = document.getElementById('myCanvas').getContext('2d');
ctx .clip(); //裁切路径
ctx.lineWidth = value; //线条粗细
ctx.lineCap = type; //线条两端样式
ctx.lineJoin = type; //两线段连接处样式
ctx.miterLimit= value; //绘制交点方式
线性渐变:
var lingrad = ctx.createLinearGradient( 0 , 0
, 0 , 200 );
//( 0,0)渐变起点,( 0,200)渐变终点
lingrad.addColorStop( 0 , '#ff0000'); //定义色标位置及上色
径向渐变:
var radialgradient = ctx.createRadialGradient( 100,100,30,100,100,200);
//(100,100)原点1,30半径1; (100,100)原点2,200半径2
阴影:
context.shadowOffsetX = float; //阴影水平偏移
context.shadowOffsetY
= float; //阴影垂直偏移
context.shadowBlur
= float; //阴影羽化程度
context.shadowColor
= color; //阴影颜色
相关文章推荐
- HTML4.01与HTML5中四个标签(<b><i><strong><em>)的区分总结
- HTML5 之标签实验室、HTML5标签总结
- HTML5 canvas标签详解
- HTML5中的Canvas标签使用收录
- HTML5新标签之Canvas
- HTML5之Canvas标签简要学习
- HTML5 Canvas标签使用收录
- HTML5学习(2) canvas标签的使用四
- HTML5学习(2) canvas标签的使用三
- [HTML5-Canvas] HTML5 <canvas> 标签
- HTML5 - Chrome中canvas标签显示图片空白问题
- 分享HTML5 canvas 的总结
- HTML5 学习手笔四:canvas 总结
- HTML5 Canvas 基础开发教程 总结
- html5-canvas标签-绘制矩形
- 强大的html5的canvas标签
- html5标签canvas
- 【待续】【HTML5】用Canvas标签创建第一张条线图
- HTML5 之Canvas标签学习笔记之二:绘制矩形
- HTML5之Canvas标签简要学习