html5--5-12 渐变色
2024-08-29 17:30:58
html5--5-12 渐变色
学习要点
- 掌握渐变色的绘制方法
渐变色绘制方法
- createLinearGradient() 创建线性渐变
- createLinearGradient(x1,y1,x2,y2)---颜色渐变的起始坐标和终点坐标
- addColorStop(位置,"颜色值")---0表示起点...插入点...1表示终点,配置颜色停止点
- createRadialGradient(x1,y1,r1,x2,y2,r2,) 创建放射状/环形的渐变
- ....
文字的绘制方法
- strokeText("文字",x,y,maxWith) 绘制(描边)空心文字
- fillText("文字",x,y,maxWith) 绘制实心
- 字体样式:font="大小 字体 ..."
矩形的绘制方法
- rect(x,y,w,h)创建一个矩形
- strokeRect(x,y,w,hx,y,w,h) 绘制矩形(无填充)
- fillRect(x,y,w,h) 绘制"被填充"的矩形
- stroke() 绘制已定义的路径
- fill()绘制一个实心的(带填充的图形)
Canvas的路径方法
- moveTo() 定义绘制路径的起点(在直线中就是定义直线的起点)
- lineTo() 添加一个新点,(在我们的直线案例中就是定义直线的终点,但是后边继续绘制的话,它就变成中间点)
- stroke() 绘制已定义的路径
- fill()绘制一个实心的(带填充的图形)
- beginPath() 用来创建新的路径
- closePath() 从当前点回到起始点的来封闭路径
- arc(x,y,r,开始角度,结束角度,true/false) :创建圆弧/曲线(用于创建圆形或部分圆)
绘制直线段流程:
- 在HTML5文档中添加canvas元素,并且设置的宽高和ID
- 在canvas元素中添加提示语句,让不支持canvas的浏览器能够显示友好的提示语句
- 添加script元素
- 获取画布/设置绘图绘图环境:此为固定语句,暂时记住、了解即可,后续课程还会继续讲解
- 指定线宽:lineWidth= 数值
- 指定颜色:strokeStyle=颜色值(只适用用轮廓,线段等,填充色用:fillStyle=颜色值
- 设定起点:moveTo(x坐标,y坐标)
- 设定终点:lineTo(x坐标,y坐标)
- 开始绘制:stroke()
绘制矩形流程:
- 在HTML5文档中添加canvas元素,并且设置的宽高和ID
- 在canvas元素中添加提示语句,让不支持canvas的浏览器能够显示友好的提示语句
- 添加script元素
- 获取画布/设置绘图绘图环境:此为固定语句,暂时记住、了解即可,后续课程还会继续讲解
- 绘制空心矩形
- 指定线宽:lineWidth= 数值
- 指定轮廓颜色:strokeStyle=颜色值(只适用用轮廓,线段等,填充色用:fillStyle=颜色值
- 设定矩形的基本参数:strokeRect(x,y;width,height)
- 绘制填充矩形
- 指定填充颜色:fillStyle=颜色值(只适用用轮廓,线段等,填充色用:fillStyle=颜色值
- 设定矩形的基本参数:fillRect(x,y;width,height)
绘制圆
- 在HTML5文档中添加canvas元素,并且设置的宽高和ID
- 在canvas元素中添加提示语句
- 添加script元素
- 获取画布/设置绘图绘图环境
- 指定线宽:lineWidth= 数值
- 指定颜色:fill/strokeStyle=颜色值(只适用用轮廓,线段等,填充色用:fillStyle=颜色值
- 设定圆的基本参数:
- 圆心的坐标:x,y
- 圆的半径:数值
- 起始弧度和终止弧度:角度值1,角度值2
- 绘制方向:true(逆时针)/false(顺时针)
- 开始绘制:stroke()/fill()
实例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head> <body>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
canvas{background: #A9A9A0}
</style>
</head>
<body>
<canvas id="mycanvas" width="500px" height="300">
您的浏览器暂不支持HTML5的canvas元素!!
</canvas>
<script type="text/javascript">
//定义变量获取画布DOM
var canvas=document.getElementById("mycanvas");
//设置绘画环境为2d
var context=canvas.getContext("2d");
context.lineWidth=2;
context.strokeStyle="#00FFFF";
context.fillStyle="#FFA500"; context.moveTo(250,250);
context.arc(250,250,200,Math.PI*7/6,Math.PI*1.5,false);
context.moveTo(250,250);
context.arc(250,250,200,Math.PI*11/6,Math.PI*1.5,true);
context.fill(); context.beginPath();
context.fillStyle="#A9A9A0";
context.moveTo(250,250);
context.arc(250,250,100,Math.PI*7/6,Math.PI*1.5,false);
context.moveTo(250,250);
context.arc(250,250,100,Math.PI*11/6,Math.PI*1.5,true);
context.fill(); //绘制文字
context.beginPath();
context.font="40px 隶书";
context.strokeText("纵横",210,260);
context.beginPath();
context.fillStyle="#FFA500";
context.fillText("纵横",210,260);
//给扇子加字体
context.beginPath();
context.fillStyle="#000000";
context.font="60px 隶书";
context.fillText("纵",220,100);
context.beginPath();
context.strokeStyle="#FF0000";
context.strokeText("横",220,140); //渐变色
//1、设置渐变色
var gradient=context.createLinearGradient(50,50,400,230);
//添加渐变色中的颜色
gradient.addColorStop(0,"#000000");
gradient.addColorStop(0.2,"#FF0000");
gradient.addColorStop(0.4,"#00FF00");
gradient.addColorStop(0.6,"#0000FF");
gradient.addColorStop(0.8,"#FF00FF");
gradient.addColorStop(1,"#FFFFFF");
//2、用设置好的渐变色来填充我们的日常图形就好
context.fillStyle=gradient;
context.fillRect(50,50,400,230); //给扇子加渐变色
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head> <body>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
canvas{background: #A9A9A0}
</style>
</head>
<body>
<canvas id="mycanvas" width="500px" height="300">
您的浏览器暂不支持HTML5的canvas元素!!
</canvas>
<script type="text/javascript">
//定义变量获取画布DOM
var canvas=document.getElementById("mycanvas");
//设置绘画环境为2d
var context=canvas.getContext("2d");
//1、设置渐变色
var gradient=context.createLinearGradient(50,50,400,230);
//添加渐变色中的颜色
gradient.addColorStop(0,"#000000");
gradient.addColorStop(0.2,"#FF0000");
gradient.addColorStop(0.4,"#00FF00");
gradient.addColorStop(0.6,"#0000FF");
gradient.addColorStop(0.8,"#FF00FF");
gradient.addColorStop(1,"#FFFFFF");
//2、用设置好的渐变色来填充我们的日常图形就好
context.lineWidth=2;
context.strokeStyle="#00FFFF";
context.fillStyle=gradient; context.moveTo(250,250);
context.arc(250,250,200,Math.PI*7/6,Math.PI*1.5,false);
context.moveTo(250,250);
context.arc(250,250,200,Math.PI*11/6,Math.PI*1.5,true);
context.fill(); context.beginPath();
context.fillStyle="#A9A9A0";
context.moveTo(250,250);
context.arc(250,250,100,Math.PI*7/6,Math.PI*1.5,false);
context.moveTo(250,250);
context.arc(250,250,100,Math.PI*11/6,Math.PI*1.5,true);
context.fill(); //绘制文字
context.beginPath();
context.font="40px 隶书";
context.strokeText("纵横",210,260);
context.beginPath();
context.fillStyle="#FFA500";
context.fillText("纵横",210,260);
//给扇子加字体
context.beginPath();
context.fillStyle="#000000";
context.font="60px 隶书";
context.fillText("纵",220,100);
context.beginPath();
context.strokeStyle="#FF0000";
context.strokeText("横",220,140); // //渐变色
// //1、设置渐变色
// var gradient=context.createLinearGradient(50,50,400,230);
// //添加渐变色中的颜色
// gradient.addColorStop(0,"#000000");
// gradient.addColorStop(0.2,"#FF0000");
// gradient.addColorStop(0.4,"#00FF00");
// gradient.addColorStop(0.6,"#0000FF");
// gradient.addColorStop(0.8,"#FF00FF");
// gradient.addColorStop(1,"#FFFFFF");
// //2、用设置好的渐变色来填充我们的日常图形就好
// context.fillStyle=gradient;
// context.fillRect(50,50,400,230); //给扇子加渐变色
</script>
</body>
</html>
最新文章
- 中间人攻击 -- Cookie 喷发
- 10个调试Java的技巧
- sqlHelper做增删改查
- Oracle 存储过程 split 代码实现
- HDU 5950 矩阵快速幂
- Centos 5.x/6.x 配置163网易yum源
- 在Windows上一键编译各种版本的Protobuf
- [工具][windows][visualStudio][充电]番茄助手vaassist常见用法
- php获取汉字的拼音 拼音首字母
- MongoDB 语法(转)
- nagios插件之监控if8接口日志(新接口)
- Swift语言iOS8的蓝牙Bluetooth解析
- ZOJ 38727(贪心)
- 使用gulp创建ajax模拟请求
- ASP.NET没有魔法——ASP.NET MVC使用Oauth2.0实现身份验证
- 53、css补充
- spark2.1源码分析2:从SparkPi分析一个job的执行
- Groovy 和 Gradle
- Win10上安装Keras 和 TensorFlow(GPU版本)
- 51nod1185 威佐夫游戏 V2 (模拟乘法)