HTML5-Canvas
来源:互联网 发布:python md5加密文件 编辑:程序博客网 时间:2024/06/06 14:32
Canvas绘图
绘制线段
HTML结构
<canvas id="diagonal" width="400px" height="400px"> 您的浏览器不支持!</canvas>
通过css方式可以为canvas增加边框,设置内边距、外边距等,其中某些样式还将被canvas本身继承
绘制线
var canvas = document.querySelector('canvas#diagonal');var context = canvas.getContext('2d');context.beginPath(); //告知canvas对象做好绘制图像准备context.moveTo(0, 0); //移动画笔到开始处context.lineTo(300, 300); //告知画笔将要绘制的直线的终点context.stroke(); //执行绘制
* getContext传递webgl
将支持3D绘图
* stroke(); 绘制线
* translate(100, 100); 指定起始点
* scale(); 做图形的变化
* save(); 保存当前绘制的状态
* restore(); 恢复原有保存的状态
* closePath(); 将起始坐标当作绘制终点
* linewidth 线的宽度
* lineJoin 线的结合点,round(圆角),bevel(切线),miter(默认)
* strokeStyle 线的颜色
* linCap 没有闭合线的样式
* fill() 执行填充
* fillStyle 指定填充色
* fillRect() 绘制填充矩形,参数是起始点和宽高
* strokeRect() 非填充矩形
* clearRect() 指定矩形区域绘制将被清除
* quadraticCurveTo() 绘制曲线,指定控制点和终点
* drawImage() 插入已经存在的图像,并指定宽高
* createLinearGradient() 绘制线性渐变,指定起始和终点
* addColorStop() 渐变过程中某一色值
* createRadialgradient() 放射渐变,指定两个圆的圆心
* createPattern() 将已有图像当作颜料,参数为图像的对象,平铺方式
* rotate() 指定角度进行图像的旋转
* fillText() 填充文字,文本,位置,最大宽度
* strokeText() 非填充文字
* font 设置文字大小和字体
* textAlign 对齐方式
* textBaseLine 垂直对齐方式
* shadownColor 阴影颜色
* shadownOffsetX 水平偏移
* shadownOffsetY 垂直偏移
* shadownBlur 模糊值
* toDataUrl() URL格式的Canvas数据
绘制矩形
var canvas = document.querySelector('canvas#diagonal');var context = canvas.getContext('2d');context.fillRect(0, 0, 100, 100);context.strokeRect(120, 0, 100, 100);context.fillStyle = "red";context.strokeStyle = "blue";context.fillRect(0, 120, 100, 100);context.strokeRect(120, 120, 100, 100);context.fillStyle = "rgba(255, 0, 0, .2)";context.strokeStyle = "rgba(255, 0, 0, .2)";context.fillRect(240, 0, 100, 100);context.strokeRect(240, 120, 100, 100);context.clearRect(0, 0, canvas.width, canvas.height)
绘制圆弧
- x:圆心的x坐标
- y:圆心的y坐标
- straAngle:开始角度
- endAngle:结束角度
- anticlockwise:(true)为逆时针,(false)为顺时针
绘制圆形
var canvas = document.querySelector('canvas#diagonal');var context = canvas.getContext('2d');context.beginPath();context.arc(200, 200, 100, 0, Math.PI * 2, true);context.closePath();context.fillStyle = "rgba(0, 255, 0, 0.25)";context.fill();
绘制圆弧
var canvas = document.querySelector('canvas#diagonal');var context = canvas.getContext('2d');context.beginPath();context.arc(100, 150, 50, 0, Math.PI/2 , false);context.strokeStyle = 'rgba(255,0,0,0.25)'/*context.closePath();*/context.stroke();
绘制阴影
- context.shadowOffsetX :阴影的横向位移量(默认值为0)
- context.shadowOffsetY :阴影的纵向位移量(默认值为0)
- context.shadowColor :阴影的颜色
- context.shadowBlur :阴影的模糊范围(值越大越模糊)
var canvas = document.querySelector(‘canvas#diagonal’);
var context = canvas.getContext(‘2d’);
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowColor = ‘rgba(100, 100, 100, .5)’;
context.shadowBlur = 1.5;
context.fillStyle = “rgba(255, 0, 0, .5)”;
context.fillRect(100, 100, 200, 100);
渐变色
线性渐变
线性渐变createLinearGradient(xStart,yStart,xEnd,yEnd)
线性渐变颜色addColorStop(offset,color)
- xstart:渐变开始点x坐标
- ystart:渐变开始点y坐标
- xEnd:渐变结束点x坐标
- yEnd:渐变结束点y坐标
- offset:设定的颜色离渐变结束点的偏移量(0~1)
color:绘制时要使用的颜色
var canvas = document.querySelector('canvas#diagonal');var context = canvas.getContext('2d');var G_linear = context.createLinearGradient(0, 0, 0, 300);G_linear.addColorStop(0, 'rgba(255, 0, 0, 1)');G_linear.addColorStop(0.5, 'rgba(0, 255, 0, 1)');G_linear.addColorStop(1, 'rgba(0, 0, 255, 1)');context.fillStyle = G_linear;context.fillRect(0, 0, 400, 300);
发散渐变
径向渐变(发散)createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)
径向渐变(发散)颜色addColorStop(offset,color)
- xStart:发散开始圆心x坐标
- yStart:发散开始圆心y坐标
- radiusStart:发散开始圆的半径
- xEnd:发散结束圆心的x坐标
- yEnd:发散结束圆心的y坐标
- radiusEnd:发散结束圆的半径
- offset:设定的颜色离渐变结束点的偏移量(0~1)
color:绘制时要使用的颜色
var canvas = document.querySelector('canvas#diagonal');var context = canvas.getContext('2d');var g1 = context.createRadialGradient(200, 150, 0, 200, 150, 100);g1.addColorStop(0.1, 'rgba(255, 0, 0, 1)');g1.addColorStop(1, 'rgba(50, 0, 0, 1)');context.fillStyle = g1;context.beginPath();context.arc(200, 200, 100, 0, Math.PI * 2, true);context.closePath();context.fill();
写字
var canvas = document.querySelector('canvas#diagonal');var context = canvas.getContext('2d');context.font = "60px impact";context.fillStyle = "#996600";context.textAlign = "center";context.fillText('辛丙亮', 200, 60, 400);
使用已有文件
插入已有的图像
- context.drawImage(image,x,y)
- image:Image对象var img=new Image(); img.src=”url(…)”;
- x:绘制图像的x坐标
y:绘制图像的y坐标
var canvas = document.querySelector('canvas#diagonal');var context = canvas.getContext('2d');var img = new Image();img.src = 'weather.png';context.fillStyle = "#eeeeff";context.fillRect(0, 0, 400, 400);context.drawImage(img, 0, 0, 300, 300);
使用图片作为样式源
context.createPattern(image,type)
* image 使用的图像资源
* type 重复方式、repeat、repeat-x、repeat-y、no-repeat
var canvas = document.querySelector('canvas#diagonal'); var context = canvas.getContext('2d'); var img = new Image(); img.src = 'weather.png'; var handle = context.createPattern(img, 'repeat'); context.fillStyle = handle; context.fillRect(0, 0, 400, 400);
裁剪
var canvas = document.querySelector('canvas#diagonal');var context = canvas.getContext('2d');var img = new Image();img.src = 'weather.png';context.fillStyle = "black";context.fillRect(0, 0, 400, 400);context.arc(150, 150, 100, 0, Math.PI * 2, true);context.closePath();context.clip();context.drawImage(img,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
- html5-canvas
- html5---canvas
- html5 canvas
- HTML5 Canvas
- 淘淘商城---8.8
- MVC请求处理流程
- linux系统中多种方式设置全局变量(java 环境变量配置)
- MobSF环境搭建
- 自动布局-Constraint
- HTML5-Canvas
- HTTP的密码验证方法和使用
- 二叉树的非递归遍历
- 2016年计划
- 14、CSS3-分栏布局
- Android Stduio统计项目的代码行数
- Size Class
- 单点登录技术
- 从零学React Native之06flexbox布局