5_H5中Canvas绘图

HTML5的canvas元素是HTML5技术标准中最令人振奋的功能之一。

它提供了一套强大的图形API，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。让开发者能够制作从文字处理到电子游戏的各类应用程序。

绘制直线段流程:

在HTML5文档中添加canvas元素，并且设置的宽高和ID
在canvas元素中添加提示语句，让不支持canvas的浏览器能够显示友好的提示语句
添加script元素
获取画布/设置绘图绘图环境：此为固定语句
1. 指定线宽:lineWidth= 数值
2. 指定颜色：strokeStyle=颜色值（只适用用轮廓，线段等，填充色用： fillStyle=颜色值
设定起点：moveTo(x坐标,y坐标)
设定终点：lineTo(x坐标,y坐标)
开始绘制：stroke()

Canvas的路径方法

moveTo() 定义绘制路径的起点(在直线中就是定义直线的起点)
lineTo() 添加一个新点，(在我们的直线案例中就是定义直线的终点，但是后边继续绘制的话，它就变成中间点)
stroke() 绘制已定义的路径
fill()绘制一个实心的（带填充的图形）
beginPath() 用来创建新的路径
closePath() 从当前点回到起始点的来封闭路径
arc(x,y,r,开始角度，结束角度，true/false) ：创建圆弧/曲线（用于创建圆形或部分圆）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style type="text/css">
    canvas{background: rgb(99, 101, 107)}
  </style>
</head>
<body>
  <canvas id="myCanvas" width="500px" height="300px">
    您的浏览器不支持Html5的元素
  </canvas>
  <script type="text/javascript">
    var canvas=document.getElementById('myCanvas');// 定义变量获取画布Dom
    var context=canvas.getContext('2d');// 设置绘图环境为2d
    context.lineWidth=5;
    context.strokeStyle="rgb(52, 249, 182)"
    context.moveTo(0,0);
    context.lineTo(200,200);
    context.stroke();
  </script>
</body>
</html>

line.png

绘制矩形流程：

在HTML5文档中添加canvas元素，并且设置的宽高和ID
在canvas元素中添加提示语句，让不支持canvas的浏览器能够显示友好的提示语句
添加script元素
获取画布/设置绘图绘图环境：此为固定语句，
- 绘制空心矩形
  1. 指定线宽:lineWidth= 数值
  2. 指定轮廓颜色：strokeStyle=颜色值（只适用用轮廓，线段等，填充色用：fillStyle=颜色值
  3. 设定矩形的基本参数：strokeRect(x,y;width,height)
- 绘制填充矩形
  1. 指定填充颜色：fillStyle=颜色值（只适用用轮廓，线段等，填充色用：fillStyle=颜色值
  2. 设定矩形的基本参数：fillRect(x,y;width,height)

矩形的绘制方法

rect(x,y,w,h)创建一个矩形
strokeRect(x,y,w,hx,y,w,h) 绘制矩形（无填充）
fillRect(x,y,w,h) 绘制"被填充"的矩形
stroke() 绘制已定义的路径
fill()绘制一个实心的（带填充的图形）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style type="text/css">
    canvas{background: rgb(99, 101, 107)}
  </style>
</head>
<body>
  <canvas id="myCanvas" width="500px" height="300px">
    您的浏览器不支持Html5的元素
  </canvas>
  <script type="text/javascript">
    var canvas=document.getElementById('myCanvas');// 定义变量获取画布Dom
    var context=canvas.getContext('2d');// 设置绘图环境为2d
    context.lineWidth=5;
    context.strokeStyle="rgb(52, 249, 182)"
    context.moveTo(50,50);
    context.lineTo(100,50);
    context.lineTo(100,100);
    context.lineTo(50,100);
    // context.lineTo(50,50);
    context.closePath();
    context.stroke();

    context.beginPath();
    context.rect(150,50,50,50);
    context.fill();
    context.stroke();

    context.beginPath();
    context.strokeRect(250,50,50,50)
    context.stroke();

    context.beginPath();
    context.fillStyle="rgb(150, 18, 224)"
    context.fillRect(350,50,50,50)
    context.stroke();
  </script>
</body>
</html>

rect.png

绘制圆

在HTML5文档中添加canvas元素，并且设置的宽高和ID
在canvas元素中添加提示语句
添加script元素
获取画布/设置绘图绘图环境
指定线宽:lineWidth= 数值
指定颜色：fill/strokeStyle=颜色值（只适用用轮廓，线段等，填充色用：fillStyle=颜色值
设定圆的基本参数：
- 圆心的坐标:x,y
- 圆的半径：数值
- 起始弧度和终止弧度：角度值1，角度值2
- 绘制方向：true（逆时针）/false（顺时针）
开始绘制：stroke()/fill（）

文字的绘制方法

strokeText("文字"，x,y,maxWith) 绘制（描边）空心文字
fillText("文字"，x,y,maxWith) 绘制实心
字体样式：font="大小字体 ..."

渐变色绘制方法

createLinearGradient() 创建线性渐变
- createLinearGradient(x1,y1,x2,y2)---颜色渐变的起始坐标和终点坐标
- addColorStop(位置,"颜色值")---0表示起点...插入点...1表示终点，配置颜色停止点
createRadialGradient(x1,y1,r1,x2,y2,r2,) 创建放射状/环形的渐变

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <canvas id="myCanvas" width="800px" height="600" style="background:rgb(236, 52, 205)">

  </canvas>
  <script type="text/javascript">
    var canvas = document.getElementById('myCanvas');
    var con = canvas.getContext('2d');
    con.lineWidth = 5;
    con.strokeStyle = "rgb(69, 191, 45)";
    con.fillStyle = "rgb(130, 6, 156)";

// 圆
    con.arc(100,50,30,0,Math.PI);
    con.stroke();

    con.beginPath();
    con.arc(100,150,30,0,Math.PI*2);
    con.fill()

    con.beginPath();
    con.arc(100,250,30,0,Math.PI*2);
    con.fill();
    con.stroke();

    con.beginPath()
    con.arc(200,50,30,0,Math.PI/3,true);
    con.stroke();

    con.beginPath()
    con.arc(200,150,30,0,Math.PI/3,true);
    con.fill();

    con.beginPath()
    con.lineWidth = 2;
    con.arc(200,250,30,0,Math.PI/3,true);
    con.fill()
    con.stroke()

    con.beginPath();
    con.arc(300,50,30,0,Math.PI/3,true);
    con.closePath();
    con.stroke();

    con.beginPath();
    con.arc(300,150,30,0,Math.PI/3,true);
    con.closePath();
    con.fill();

    con.beginPath();
    con.arc(300,250,30,0,Math.PI/3,true);
    con.closePath();
    con.fill();
    con.stroke();

// 扇形
    con.fillStyle = "rgb(207, 59, 66)"
    con.beginPath();
    con.moveTo(450,100);
    con.arc(450,100,100,Math.PI*7/6,Math.PI*1.5,false);
    con.fill();

    con.beginPath();
    con.moveTo(450,100);
    con.arc(450,100,100,Math.PI*11/6,Math.PI*1.5,true);
    con.fill();

    con.fillStyle = "rgb(236, 52, 205)"
    con.strokeStyle = "rgb(236, 52, 205)"
    con.beginPath();
    con.moveTo(450,100);
    con.arc(450,100,70,Math.PI*7/6,Math.PI*1.5,false);
    con.fill();
    con.stroke();

    con.beginPath();
    con.moveTo(450,100);
    con.arc(450,100,70,Math.PI*11/6,Math.PI*1.5,true);
    con.fill();
    con.stroke();
// 文字
    con.strokeStyle = "rgb(176, 162, 60)"
    con.beginPath();
    con.font = "40px 宋体"
    con.strokeText("文",400,100,50);

    con.fillStyle = "rgb(73, 230, 33)"
    con.beginPath();
    con.font = "40px 楷体"
    con.fillText("文",490,100,50);

// 渐变色
    con.beginPath();
    g = con.createLinearGradient(400,120,450,120);
    g.addColorStop(0,"rgb(217, 240, 98)");
    g.addColorStop(0.5,"rgb(11, 16, 145)");
    g.addColorStop(1,"rgb(135, 10, 129)");
    con.fillStyle = g;
    con.fillRect(400,120,100,100);

// 放射渐变
  con.beginPath();
  g1 = con.createRadialGradient(400,300,30,500,300,30);
  g1.addColorStop(0,"rgb(233, 104, 21)");
  g1.addColorStop(0.3,"rgb(57, 233, 21)");
  g1.addColorStop(0.6,"rgb(63, 21, 233)");
  g1.addColorStop(1,"rgb(21, 233, 131)");
  con.fillStyle = g1;
  con.fillRect(400,240,100,100);

  </script>
</body>
</html>

canvas.png

太极练习

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <canvas id="myCanvas" width="600" height="300" style="background:rgb(38, 69, 153)">

  </canvas>
  <script>
    var canvas = document.getElementById('myCanvas');
    var con = canvas.getContext('2d');
    // 太极
    g = con.createLinearGradient(150,50,150,250);
    g.addColorStop(0,"rgb(255, 255, 255)");
    g.addColorStop(1,"rgb(0, 0, 0)")
    con.fillStyle = g;
    con.arc(150,150,100,Math.PI/2,-Math.PI/2);
    con.fill();

    g1 = con.createLinearGradient(150,50,150,250);
    g1.addColorStop(0,"rgb(0, 0, 0)");
    g1.addColorStop(1,"rgb(255, 255, 255)");
    con.fillStyle = g1;

    con.beginPath();
    con.arc(150,150,100,-Math.PI/2,Math.PI/2);
    con.fill();

    con.fillStyle = g;
    con.beginPath();
    con.arc(150,200,50,Math.PI/2,-Math.PI/2,true);
    con.fill();

    con.fillStyle = g1;
    con.beginPath();
    con.arc(150,100,50,-Math.PI/2,Math.PI/2,true);
    con.fill();

    g2 = con.createRadialGradient(150,100,1,150,100,10);
    g2.addColorStop(0,"rgb(0, 0, 0)");
    g2.addColorStop(1,"rgb(255, 255, 255)");
    con.fillStyle = g2;

    con.beginPath();
    con.arc(150,100,10,0,Math.PI*2);
    con.fill();

    g2 = con.createRadialGradient(150,200,1,150,200,10);
    g2.addColorStop(1,"rgb(0, 0, 0)");
    g2.addColorStop(0,"rgb(255, 255, 255)");
    con.fillStyle = g2;

    con.beginPath();
    con.arc(150,200,10,0,Math.PI*2);
    con.fill();

  </script>
</body>
</html>

太极.png

绘制阴影的方法

shadowOffsetX 设置阴影的水平偏移距离
shadowOffsetY 设置阴影垂直偏移距离
shadowBlur 设置阴影的模糊系数
shadowColor 设置阴影的颜色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <canvas id="myCanvas" width="300" height="300" style="background:rgb(38, 69, 153)">

  </canvas>
  <script>
    var canvas = document.getElementById('myCanvas');
    var con = canvas.getContext('2d');

    con.shadowOffsetX = 10;
    con.shadowOffsetY = 10;
    con.shadowBlur = 5;
    con.shadowColor = "rgb(169, 7, 235)";

    con.font = "20px 楷体";
    con.fillText("啦啦啦，我是一个粉刷匠",0,100);

    con.beginPath();
    con.strokeRect(80,180,100,100);

  </script>
</body>
</html>

shadow.png

练习

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <canvas id="myCanvas" width="300" height="300" style="background:rgb(38, 69, 153)">

  </canvas>
  <script>
    var canvas = document.getElementById('myCanvas');
    var con = canvas.getContext('2d');

    con.shadowOffsetX = 0;
    con.shadowOffsetY = 8;
    con.shadowBlur = 8;
    con.shadowColor = "Black";

    con.font = "20px 宋体";
    con.fillText("绘制饼图",50,30);

    con.beginPath();
    con.fillStyle = "rgb(244, 77, 38)";
    con.moveTo(150,150);
    con.arc(150,150,100,0,Math.PI/3);
    con.fill();

    con.beginPath();
    con.fillStyle = "Black";
    con.font = "15px 楷体";
    con.fillText("15%",190,180);

    con.beginPath();
    con.fillStyle = "rgb(38, 225, 244)";
    con.moveTo(150,150);
    con.arc(150,150,100,Math.PI/3,Math.PI);
    con.fill();

    con.beginPath();
    con.fillStyle = "Black";
    con.font = "15px 楷体";
    con.fillText("35%",100,200);

    con.beginPath();
    con.fillStyle = "rgb(38, 244, 127)";
    con.moveTo(150,150);
    con.arc(150,150,100,Math.PI,Math.PI*2);
    con.fill();

    con.beginPath();
    con.fillStyle = "Black";
    con.font = "15px 楷体";
    con.fillText("50%",140,100);

  </script>
</body>
</html>

饼.png

最后编辑于：2017.12.04 23:25:19

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 202,723评论 5赞 476
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,080评论 2赞 379
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 149,604评论 0赞 335
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,440评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,431评论 5赞 364
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,499评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,893评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,541评论 0赞 256
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,751评论 1赞 296
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,547评论 2赞 319
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,619评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,320评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,890评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,896评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,137评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,796评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,335评论 2赞 342

5_H5中Canvas绘图

HTML5的canvas元素是HTML5技术标准中最令人振奋的功能之一。

它提供了一套强大的图形API，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。让开发者能够制作从文字处理到电子游戏的各类应用程序。

绘制直线段流程:

Canvas的路径方法

绘制矩形流程：

矩形的绘制方法

绘制圆

文字的绘制方法

渐变色绘制方法

太极练习

绘制阴影的方法

练习

推荐阅读更多精彩内容