html5笔记(5)使用canvas绘图1

最新推荐文章于 2023-08-05 11:28:33 发布

liujf

最新推荐文章于 2023-08-05 11:28:33 发布

阅读量1k

点赞数

分类专栏：学习笔记 HTML5 文章标签： web前端 html5

本文链接：https://blog.csdn.net/ljf5566/article/details/8684434

版权

学习笔记同时被 2 个专栏收录

51 篇文章 0 订阅

订阅专栏

HTML5

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<canvas id="trails" width="200" height="300" style="border:1px solid;"></canvas>
<script>
//在画布上画树
function drawTrails()
{
	var canvas=document.getElementById('trails');
	var context=canvas.getContext('2d');
	context.save();
	context.translate(100,250);

	//1、路径
	//创建表现树冠的路径
	createCanopyPath(context);
	
	//2、描边样式
	//加宽线条
	context.lineWidth=4;
	//平滑路径的接合点
	context.linejoin='round';
	//将颜色修改为棕色
	context.strokeStyle='#663300';

	//3、填充样式	
	//将填充色设置为绿色并填充树冠
	context.fillStyle='#339900';
	context.fill();

	//4、填充矩形区域
	//将填充色设置为棕色
	context.fillStyle='#663300';
	//填充用作树干的矩形区域
	context.fillRect(-5,-50,10,50);

	//最后绘制树冠
	context.stroke();
	context.restore();

}
window.addEventListener("load",drawTrails,true);

//用于绘制树冠轮廓的函数
function createCanopyPath(context)
{
	//绘制树冠
	context.beginPath();
	context.moveTo(-25,-50);
	context.lineTo(-10,-80);
	context.lineTo(-20,-80);
	context.lineTo(-5,-110);
	context.lineTo(-15,-110);

	//树的顶点
	context.lineTo(0,-140);

	context.lineTo(15,-110);
	context.lineTo(5,-110);
	context.lineTo(20,-80);
	context.lineTo(10,-80);
	context.lineTo(25,-50);
	//连接起点，闭合路径
	context.closePath();
}
</script>
</head>
</html>

liujf

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5笔记(5)使用canvas绘图1

//在画布上画树function drawTrails(){ var canvas=document.getElementById('trails'); var context=canvas.getContext('2d'); context.save(); context.translate(100,250); //1、路径 //创建表现树冠的路径 createCanopyP
复制链接

扫一扫

专栏目录