HTML5之canvas 6 绘制渐变图形

线性渐变

Var grd=context.createLinearGradient(xStart,yStart,xEnd,yEnd)

（xStart,yStart）起点，（xEnd,yEnd）终点

grd.addColorStop(offset,color);

offset范围是0~1之间的浮点数，color是关键颜色

二、

径向渐变

Var grd=context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd);

(xStart,yStart,radiusStart)起点圆的中心点坐标和半径，（xEnd,yEnd,radiusEnd）终点圆的中心点坐标和半径

三、

坐标变换

 1 <html>
 2
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>线性渐变-径向渐变-坐标变换</title>
 6         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 7
 8     </head>
 9
10     <body>
11         <canvas id="canvas" width="500" height="500"></canvas>
12         <script type="text/javascript">
13             var oCanvas = document.getElementById("canvas");
14             var context = oCanvas.getContext("2d");
15             //定一个变量，线性渐变
16             var grd = context.createLinearGradient(0, 0, 500, 0); //（xStart,yStart）起点，（xEnd,yEnd）终点
17             grd.addColorStop(0, ‘#ff0‘); //offset范围是0~1之间的浮点数，color是关键颜色
18             grd.addColorStop(0.5, ‘#f30‘);
19             grd.addColorStop(1, ‘#7fc259‘);
20             context.fillStyle = grd;
21             context.fillRect(0, 0, 500, 500);
22
23             //径向渐变
24             context.beginPath(); //开始
25             var grdCirle = context.createRadialGradient(100, 100, 50, 100, 100, 100);
26             //(xStart,yStart,radiusStart)起点圆的中心点坐标和半径，（xEnd,yEnd,radiusEnd）终点圆的中心点坐标和半径
27             grdCirle.addColorStop(0, "#f7f8fa"); //起点
28             grdCirle.addColorStop(0.5, "red");
29             grdCirle.addColorStop(1, "#53c5d9"); //终点
30             context.fillStyle = grdCirle;
31             context.arc(100, 100, 100, 0, 2 * Math.PI); //画一个圆
32             context.fill(); //填充
33             context.closePath(); //关上
34
35             context.beginPath();
36             var graA = context.createRadialGradient(300, 100, 50, 310, 110, 20);
37             graA.addColorStop(0, "#632cd2");
38             graA.addColorStop(0.3, "#91bd1c");
39             graA.addColorStop(0.7, "#e06a29");
40             graA.addColorStop(1, "#27cd46");
41             context.fillStyle = graA;
42             context.arc(300, 100, 100, 0, 2 * Math.PI);
43             context.fill();
44             context.closePath();
45
46
47             context.translate(250, 250);//移动坐标原点
48             //坐标变换
49             for(var i = 0; i < 30; i++) {
50                 context.rotate(Math.PI/10);//旋转角度
51                 context.scale(0.95,0.95);//缩小比例
52                 context.beginPath();
53                 context.fillStyle = "rgba(255,157,0,0.5)";
54                 context.fillRect(100, 100, 120, 60);
55                 context.closePath();
56             }
57         </script>
58     </body>
59
60 </html>

Context.translate(x,y)

Context.scale(x,y);

Context.rotate(angle);

时间： 2024-08-10 14:46:57

HTML5之canvas 6 绘制渐变图形的相关文章

[html5] 学习笔记-Canvas 绘制渐变图形与绘制变形图形

在 HTML5 中,使用 Canvas API 绘制图形的知识,可以对绘制图形进行处理,包含使用 Canvas API 绘制渐变图形,使用 Canvas API 的坐标轴变换处理功能绘制变形图形.其中,左上方的点,为坐标轴原点(0,0). 1.绘制渐变图形 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <script> 6 function draw(id){ 7 va

Canvas3——绘制渐变图形与绘制变形图形

1.Canvas绘制渐变图形 (1)绘制线性渐变 createLinearGradient() **CanvasRenderingContext2D**.createLinearGradient()方法创建一个沿参数坐标指定的直线的渐变.该方法返回一个线性 CanvasGradient对象. CanvasGradient _ctx_.createLinearGradient(x0, y0, x1, y1); 参数 x0 起点的 x 轴坐标. y0 起点的 y 轴坐标. x1 终点的 x 轴坐标.

HTML5在canvas中绘制复杂形状附效果截图

HTML5在canvas中绘制复杂形状附效果截图一.绘制复杂形状或路径在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路径. closePath() : 通过绘制一条当前点到路径起点的线段来闭合形状. fill() , stroke() : 填充形状或绘制空心形状. moveTo() : 将当前点移动到点(x,y). lineTo() : 从当前点绘制一条直线到点(x,y). arc(x,y,r,sAngle,eAn

HTML5 在canvas中绘制矩形

作者:卿笃军原文地址:http://blog.csdn.net/qingdujun/article/details/32930501 一.绘制矩形 canvas使用原点(0,0)在左上角的坐标系统,x坐标向右递增,y坐标向下递增. 使用绘图环境的矩形绘制函数来绘制矩形. fillRect(x,y,width,height) : 绘制一个实心的矩形. strokeRect(x,y,width,height) : 绘制一个空心的矩形. clearRect(x,y,width,height) : 清

HTML5 在canvas中绘制复杂形状

作者:卿笃军原文地址:http://blog.csdn.net/qingdujun/article/details/32942667 一.绘制复杂形状或路径在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路径. closePath() : 通过绘制一条当前点到路径起点的线段来闭合形状. fill() , stroke() : 填充形状或绘制空心形状. moveTo() : 将当前点移动到点(x,y). lin

HTML5 在canvas中绘制文本

作者:卿笃军原文地址:http://blog.csdn.net/qingdujun/article/details/33333519 一.绘制文本在绘图环境中提供了两种方法在canvas中绘制文本. strokeText(text,x,y) : 在(x,y)处绘制空心的文本. fillText(text,x,y) : (x,y)处绘制实心的文本. 二.在canvas中绘制文本 <!DOCTYPE html> <html> <head> <meta http-e

HTML5使用Canvas来绘制图形

一.Canvas标签: 1.HTML5<canvas>元素用于图形的绘制,通过脚本(通常是javascript)来完成. 2.<canvas>标签只是图形容器,必须使用脚本来绘制图形. 3.可以通过多种方法通过Canvas绘制路径.盒.圆.字符以及添加图像. 二.Canvas绘制图形 1.绘制矩形 2.绘制圆形 3.moveTo和lineTo 4.使用bezierCurveTo绘制贝塞尔曲线 5.绘制线性渐变 6.绘制径向渐变 7.绘制变形图形 8.绘制图形合成gloablComp

【一天一个canvas】绘制渐变线条（二）

如何使用 <canvas> 标记绘图大多数 Canvas 绘图 API 都没有定义在 <canvas> 元素本身上,而是定义在通过画布的 getContext() 方法获得的一个“绘图环境”对象上. Canvas API 也使用了路径的表示法.但是,路径由一系列的方法调用来定义,而不是描述为字母和数字的字符串,比如调用 beginPath() 和 arc() 方法. 渐变线条就是颜色有渐变的效果,当然渐变的样式可以遵循路径的方向也可以不遵循路径的方向: <!doctype

HTML5之canvas 3 绘制直线

Context.moveTo(20,20); Context.lineTo(20,200); Context.lineWidth=10; Context.lineCap=”round”; Context.lineJoin=”round”; Context.stroke(); Context.setLineDash([5,15]) <html> <head> <meta charset="UTF-8"> <title>横线-竖线-斜线<