HTML5+CSS3+JavaScript从入门到精通-05
原创HTML5+CSS3+JavaScript从入门到精通-05
原创
qiqi_fu
发布于 2021-12-03 14:15:20
发布于 2021-12-03 14:15:20
HTML5+CSS3+JavaScript从入门到精通
作者：王征，李晓波
第五章 HTML网页中的canvas绘图
案例
05-01 canvas元素
<!DOCTYPE html>
<!--web05-01-->
<!--canvas-->
<html>
<head>
<meta charset="utf-8" />
<title>canvas元素</title>
</head>
<body>
<h3 align="center">canvas元素</h3>
<hr />
<canvas id="myc1" width="700" height="300" style="background:pink"></canvas>
</body>
</html>
05-02 绘制线段
<!DOCTYPE html>
<!--web05-02-->
<!--moveTo(x,y); lineTo(x,y); stroke() -->
<html>
<head>
<meta charset="utf-8" />
<title>绘制线段</title>
</head>
<body>
<h3 align="center">绘制线段</h3>
<hr />
<canvas id="myc1" width="700" height="300" style="background:yellow"></canvas>
<script type="text/javascript">
var myc = document.getElementById("myc1");//定义变量myc，并获取canvas画布
var ctx = myc.getContext("2d");//设置绘图环境为2d，即绘制平面图形
ctx.moveTo(300, 30);
ctx.lineTo(300, 180);
ctx.stroke();
</script>
</body>
</html>
<!--
MoveTo,设置起点坐标
LineTo，设置终点坐标值或设置一个新点坐标值
stroke(),开始绘制已定义的路径
-->
05-03 线段的样式
<!DOCTYPE html>
<!--web05-03-->
<!--moveTo(x,y); lineTo(x,y); lineWidth strokeStyle -->
<html>
<head>
<meta charset="utf-8" />
<title>线段的样式</title>
</head>
<body>
<h3 align="center">线段的样式</h3>
<hr />
<canvas id="myc1" width="700" height="300" style="background:yellow"></canvas>
<script type="text/javascript">
var myc = document.getElementById("myc1");
var ctx = myc.getContext("2d");
ctx.lineWidth = 5;//设置线段的宽度
ctx.strokeStyle = "red";//设置线段的颜色
ctx.moveTo(300, 30);
ctx.lineTo(300, 180);
ctx.lineTo(500, 180);
ctx.stroke();
</script>
</body>
</html>
05-04 绘制矩形
<!DOCTYPE html>
<!--web05-04-->
<!--ctx.rect(x, y, w, h); ctx.fillRect(x, y, w, h); -->
<html>
<head>
<meta charset="utf-8" />
<title>绘制矩形</title>
</head>
<body>
<h3 align="center">绘制矩形</h3>
<hr />
<canvas id="myc1" width="700" height="300" style="background:yellow"></canvas>
<script type="text/javascript">
var myc = document.getElementById("myc1");
var ctx = myc.getContext("2d");
ctx.rect(40, 30, 100, 60); //rect(x,y,w,h)
ctx.stroke();
ctx.beginPath();//开始新的路径
ctx.lineWidth = 6;
ctx.strokeStyle = "red";
ctx.rect(160, 30, 50, 120);
ctx.stroke();
ctx.beginPath();
ctx.fillRect(240, 30, 100, 120);//填充矩形
ctx.stroke();
ctx.beginPath();
ctx.fillStyle = "green";
ctx.fillRect(380, 30, 100, 120);
ctx.stroke();
</script>
</body>
</html>
05-05 绘制圆和圆弧
<!DOCTYPE html>
<!--web05-05-->
<!--ctx.arc(x, y, r, sAngle, eAngle, true/false); stroke | fill-->
<html>
<head>
<meta charset="utf-8" />
<title>绘制圆和圆弧</title>
</head>
<body>
<h3 align="center">绘制圆和圆弧</h3>
<canvas id="myc1" width="700" height="300" style="background:yellow"></canvas>
<script type="text/javascript">
var myc = document.getElementById("myc1");
var ctx = myc.getContext("2d");
//x,y圆心坐标；r半径；sAngle圆弧起始角,弧度；eAngle圆弧结束角，弧度;
//counterclockwise false逆时针，true顺时针
//arc(x, y, r, sAngle, eAngle, counterclockwise)
ctx.arc(100, 60, 50, 0, Math.PI * 2, true);
ctx.stroke();
ctx.beginPath();//绘制带样式的圆形
ctx.lineWidth = 10;
ctx.strokeStyle = "red";
ctx.arc(260, 60, 50, 0, Math.PI * 2, true);
ctx.stroke();
ctx.beginPath();//绘制有填充的圆形
ctx.fillStyle = "green";
ctx.arc(390, 60, 50, 0, Math.PI * 2, true);
ctx.fill();//fill是填充用，stroke是画边界用
ctx.beginPath();//绘制既有填充又有边框样式的圆形
ctx.lineWidth = 15;
ctx.strokeStyle = "blue";
ctx.fillStyle = "red";
ctx.arc(530, 60, 50, 0, Math.PI * 2, true);
ctx.fill();
ctx.stroke();
ctx.beginPath(); //绘制圆弧
ctx.arc(100, 200, 50, 0, Math.PI, true);
ctx.stroke();
ctx.beginPath(); //绘制带有填充的圆弧
ctx.arc(260, 200, 50, 0, Math.PI, true);
ctx.fill(); //这里有fill，没有stroke，只是填充出来的图形，并没有边界；
//ctx.stroke();
ctx.beginPath(); //绘制带有边框和填充的圆弧
ctx.arc(390, 200, 50, 0, Math.PI, true);
ctx.fill();//前面设置过填充的颜色，故这段不需要重复设置了
ctx.stroke();
ctx.beginPath(); //绘制同心圆弧
ctx.lineWidth = 5;
ctx.strokeStyle = "red";
ctx.arc(530, 200, 50, 0, Math.PI, true);
ctx.stroke();//这里需要先画出来，否则，只会画出后面的小圆弧
ctx.beginPath();
ctx.arc(530, 200, 30, 0, Math.PI, true);
ctx.stroke();
</script>
</body>
</html>
05-06 绘制扇面
<!DOCTYPE html>
<!--web05-06-->
<!--ctx.moveTo(400, 400); ctx.arc(x, y, r, sAngle, eAngle, true/false); 最后一个参数是顺/逆时针-->
<html>
<head>
<meta charset="utf-8" />
<title>绘制扇面</title>
</head>
<body>
<h3 align="center">绘制扇面</h3>
<hr />
<canvas id="myc1" width="800" height="600" style="background:yellow"></canvas>
<script type="text/javascript">
var myc = document.getElementById("myc1");//括号里有引号
var ctx = myc.getContext("2d");
ctx.lineWidth = 3;
ctx.strokeStyle = "red";
ctx.fillStyle = "pink";
ctx.moveTo(400, 400);
ctx.arc(400, 400, 300, Math.PI * 7 / 6, Math.PI * 1.5, false);
ctx.fill();
ctx.stroke(); //stroke就是绘图的过程， moveTo定位了，所以将边框的直线画出来了
ctx.beginPath();
ctx.moveTo(400, 400);
ctx.arc(400, 400, 300, Math.PI * 11 / 6, Math.PI * 1.5, true);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.fillStyle = "yellow";
ctx.moveTo(400, 400);
ctx.arc(400, 400, 150, Math.PI * 7 / 6, Math.PI * 1.5, false);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(400, 400);
ctx.arc(400, 400, 150, Math.PI * 11 / 6, Math.PI * 1.5, true);
ctx.fill();
ctx.stroke();
ctx.beginPath();//画
</script>
</body>
</html>
05-07 利用canvas绘制文本
<!DOCTYPE html>
<!--web05-07-->
<!--ctx.strokeText(text,x,y,[textWidth]); ctx.fillText(text,x,y,[textWidth]); -->
<html>
<head>
<meta charset="utf-8" />
<title>利用canvas绘制文本</title>
</head>
<body>
<h3 align="center">利用canvas绘制文本</h3>
<hr />
<canvas id="myc1" width="800" height="600" style="background:yellow"></canvas>
<script type="text/javascript">
var myc = document.getElementById("myc1");
var ctx = myc.getContext("2d");
ctx.font = "60px 黑体";
ctx.lineWidth = 2;
ctx.strokeStyle = "red";
ctx.fillStyle = "blue";
ctx.strokeText("利用canvas绘制文本", 100, 100, 300);//strokeText只有边框的文本, 如果写maxWidth，但宽度又不够的话，会自动压缩
ctx.fillText("利用canvas绘制文本", 100, 200);//fillText只填充颜色的文本
ctx.strokeText("利用canvas绘制文本", 100, 300);//既有边框又有填充颜色的文本
ctx.fillText("利用canvas绘制文本", 100, 300);
</script>
</body>
</html>05-08 线性渐变色
<!DOCTYPE html>
<!--web05-08-->
<!--createLinearGradient(x0,y0,x1,y1); myg.addColorStop()-->
<html>
<head>
<meta charset="utf-8" />
<title>线性渐变色</title>
</head>
<body>
<h3 align="center">线性渐变色</h3>
<hr />
<canvas id="myc1" width="800" height="600" style="background:yellow"></canvas>
<script type="text/javascript">
var myc = document.getElementById("myc1");
var ctx = myc.getContext("2d");
var myg = ctx.createLinearGradient(10, 10, 200, 10);//水平渐变色
myg.addColorStop(0, "red");
myg.addColorStop(1, "orange");
ctx.fillStyle = myg;//使用渐变色
ctx.fillRect(10, 10, 200, 200);
ctx.beginPath();
var myg1 = ctx.createLinearGradient(350, 10, 350, 210);//垂直渐变色
myg1.addColorStop(0, "red");
myg1.addColorStop(0.6, "pink");
myg1.addColorStop(1, "orange");
ctx.fillStyle = myg1;
ctx.fillRect(350, 10, 200, 200);
ctx.beginPath();//圆形垂直填充渐变色
var myg2 = ctx.createLinearGradient(50, 250, 50, 350);
myg2.addColorStop(0, "green");
myg2.addColorStop(0.6, "white");
myg2.addColorStop(1, "orange");
ctx.fillStyle = myg2;
ctx.arc(100, 300, 50, 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();//文本填充水平渐变色
var myg3 = ctx.createLinearGradient(350, 300, 650, 300);
myg3.addColorStop(0, "blue");
myg3.addColorStop(0.6, "green");
myg3.addColorStop(1, "red");
ctx.fillStyle = myg3;
ctx.font = "60px 黑体"
ctx.fillText("渐变色文字", 350, 300);
</script>
</body>
</html>
05-09 放射状渐变色
<!DOCTYPE html>
<!--web05-09-->
<!--createRadialGradient(x0,y0,r0,x1,y1,r1)-->
<html>
<head>
<meta charset="utf-8" />
<title>放射状渐变色</title>
</head>
<body>
<h3 align="center">放射状渐变色</h3>
<hr />
<canvas id="myc1" width="800" height="600" style="background:yellow"></canvas>
<script type="text/javascript">
var myc = document.getElementById("myc1");
var ctx = myc.getContext("2d");
var myg = ctx.createRadialGradient(130, 200, 10, 130, 200, 90);
myg.addColorStop(0, "white");
myg.addColorStop(0.5, "red");
myg.addColorStop(1, "orange");
ctx.fillStyle = myg;
ctx.arc(130, 200, 100, 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
var myg1 = ctx.createRadialGradient(550, 250, 50, 550, 250, 200);
myg1.addColorStop(0, "blue");//记得要加颜色,如果不加，下面的文字没有显示
myg1.addColorStop(0.6, "green");
myg1.addColorStop(1, "red");
ctx.fillStyle = myg1;
ctx.font = "50px 黑体";
ctx.fillText("放射状渐变文字", 350, 200);
</script>
</body>
</html>05-10 创建带有阴影的图形和文字
<!DOCTYPE html>
<!--web05-10-->
<!--ctx.shadowBlur shadowColor shadowOffsetX shadowOffsetY -->
<html>
<head>
<meta charset="utf-8" />
<title>创建带有阴影的图形和文字</title>
</head>
<body>
<h3 align="center">创建带有阴影的图形和文字</h3>
<hr />
<canvas id="myc1" width="800" height="600" style="background:yellow"></canvas>
<script type="text/javascript">
var myc = document.getElementById("myc1");
var ctx = myc.getContext("2d");
var myg = ctx.createRadialGradient(130, 200, 10, 130, 200, 90);
myg.addColorStop(0, "white");
myg.addColorStop(0.6, "red");
myg.addColorStop(1, "orange");
ctx.fillStyle = myg;
ctx.shadowBlur = 20;//设置阴影的模糊范围
ctx.shadowColor = "black";//设置阴影的颜色
ctx.shadowOffsetX = 20; //设置阴影与图形的水平距离
ctx.shadowOffsetY = 30;//设置阴影与图形的垂直距离
ctx.arc(130, 200, 100, 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
var myg2 = ctx.createRadialGradient(550, 250, 50, 550, 250, 200);
myg2.addColorStop(0, "blue");
myg2.addColorStop(0.5, "green");
myg2.addColorStop(1, "red");
ctx.fillStyle = myg2;
ctx.font= "50px 黑体";
ctx.shadowBlur = 30;
ctx.shadowColor = "red";//阴影与图形的水平、垂直距离，沿用上面设置的属性
ctx.fillText("创建带有阴影的图形和文字", 350, 200);
</script>
</body>
</html>
05-11 绘制图像
<!DOCTYPE html>
<!--web05-11-->
<!--drawImage(img, x, y, width, height);-->
<html>
<head>
<meta charset="utf-8" />
<title>绘制图像</title>
<img id="scream" src="g1.gif" hidden /> <!--隐藏图像-->
</head>
<body>
<p align="center">绘制图像</p>
<hr />
<canvas id="myc1" width="800" height="600" style="background:yellow"></canvas>
<script type="text/javascript">
var myc = document.getElementById("myc1");
var ctx = myc.getContext("2d");
var img = document.getElementById("scream"); //定义变量并获取图像
img.onload = function () //加载图像，要这样子做
{
ctx.drawImage(img, 30, 30);//图像原大小
ctx.drawImage(img, 200, 30, 60, 60);//drawImage(img, x, y, width, height);
ctx.drawImage(img, 460, 30, 260, 260);
//剪切图像 drawImage(img,sx,sy,swidth,sheight,x,y,width,height); sx...为开始剪切的位置和大小
ctx.drawImage(img, 50, 30, 30, 30, 30, 400, 80, 80);
}
</script>
</body>
</html>
05-12 利用图像填充图形
<!DOCTYPE html>
<!--web05-12-->
<!--createPattern(image, "repeat | repeat-x | repeat-y | no-repeat" )-->
<html>
<head>
<meta charset="utf-8" />
<title>利用图像填充图形</title>
</head>
<body>
<h3 align="center">利用图像填充图形</h3>
<hr />
<!--隐藏图像-->
<img id="lamp" src="b1.png" hidden />
<canvas id="myc1" width="800" height="600" style="background:yellow; border:3px solid"></canvas>
<br />
<button onclick="draw('repeat')">重复</button>
<button onclick="draw('repeat-x')">重复-x</button>
<button onclick="draw('repeat-y')">重复-y</button>
<button onclick="draw('no-repeat')">不重复</button>
<script type="text/javascript">
function draw(direction)
{
var c = document.getElementById("myc1");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, c.width, c.height);//清空画布, 因为该函数重复调用，所以清空画布
var img = document.getElementById("lamp");
//repeat-在水平和垂直方向重复填充，默认方式； repeat-x,只在水平方向重复填充； repeat-y,垂直方向重复填充； no-repeat，只填充一次
var pat = ctx.createPattern(img, direction);//调用createPattern,实现图像填充图形
ctx.rect(0, 0, 320, 180);//填充的大小，并不是整个画布
ctx.fillStyle = pat;//设置填充样式
ctx.fill();
}
</script>
</body>
</html>原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读