canvas 画一幅画

小时候经常喜欢画这样的画，有山有水有人家。
代码有点繁冗，把重复出现的代码用函数封装起来复用会好些~

有木有感觉回到了童年？哈——哈

代码如下：

function createCanopyPath(context){context.beginPath();context.moveTo(-25,-100);context.lineTo(-10,-110);context.lineTo(-20,-110);context.lineTo(-5,-120);context.lineTo(-15,-120);context.lineTo(0,-135);context.lineTo(15,-120);context.lineTo(5,-120);context.lineTo(20,-110);context.lineTo(10,-110);context.lineTo(25,-100);context.lineWidth=4;//平滑路径context.lineJion='round';context.strokeStyle='green';context.fillStyle='green';context.fill();lineColor(context);context.fillRect(-5,-100,10,30);  context.save();context.translate(-10,10);context.beginPath();context.moveTo(0,100);context.quadraticCurveTo(250,0,-190,-150);//第二条曲线向下弯曲//context.quadraticCurveTo(0,0,160,-190);context.strokeStyle='#84c1ff';context.lineWidth=20;//连接起点闭合路径context.closePath();
}
function draw(){var canvas=document.getElementById('canvas');var context=canvas.getContext('2d');context.save();context.translate(50,140);/*绘制阴影树冠*//*要先绘制阴影树，让阴影呈现在绿树的下层*/context.save();context.transform(1,0,-0.5,1,0,0);context.scale(1,0.8);context.beginPath();context.moveTo(-55,-120);context.lineTo(-40,-130);context.lineTo(-50,-130);context.lineTo(-35,-140);context.lineTo(-45,-140);context.lineTo(-30,-155);context.lineTo(-15,-140);context.lineTo(-25,-140);context.lineTo(-10,-130);context.lineTo(-20,-130);context.lineTo(-5,-120);context.lineWidth=4;context.strokeStyle='rgba(0,0,0,0.1)';context.fillStyle='rgba(0,0,0,0.1)';context.fill();/*绘制阴影树干*/context.fillStyle='rgba(0,0,0,0.1)';context.fillRect(-40,-120,10,30);context.restore();//创建表现树冠的路径createCanopyPath(context);//绘制当前路径context.stroke();context.restore();context.save();context.transform(1,0,-0.5,1,0,0);context.scale(1,0.8);context.beginPath();context.moveTo(180,-110);context.lineTo(125,-150);context.lineTo(70,-115);context.lineWidth=4;context.strokeStyle='rgba(0,0,0,0)';context.fillStyle='rgba(0,0,0,0.1)';context.fill();context.fillStyle='rgba(0,0,0,0.1)';context.fillRect(70,-112,70,24);context.stroke();context.restore();context.save();context.beginPath();context.moveTo(180,-100);context.lineTo(125,-135);context.lineTo(70,-100);context.lineWidth=4;context.strokeStyle='#bb3d00';context.fillStyle='#bb3d00';context.fill();context.fillStyle='#a5a552';context.fillRect(75,-100,100,30);context.fillStyle='#ff8000';context.fillRect(115,-90,20,20);context.stroke();context.restore();context.save();context.beginPath();context.moveTo(125,-70);context.lineTo(125,-90);context.lineWidth=2;context.strokeStyle='#bb3d00';context.stroke();context.restore();context.save();context.transform(1,0,-0.5,1,0,0);context.scale(1,0.8);context.beginPath();context.moveTo(-5,-32);context.lineTo(10,-42);context.lineTo(0,-42);context.lineTo(15,-52);context.lineTo(5,-52);context.lineTo(20,-67);context.lineTo(35,-52);context.lineTo(25,-52);context.lineTo(40,-42);context.lineTo(30,-42);context.lineTo(50,-32);context.lineWidth=4;context.strokeStyle='rgba(0,0,0,0)';context.fillStyle='rgba(0,0,0,0.1)';context.fill();/*绘制阴影树干*/context.fillStyle='rgba(0,0,0,0.1)';context.fillRect(13,-32,10,25);context.stroke();context.restore();context.save();context.beginPath();context.moveTo(-5,-30);context.lineTo(10,-40);context.lineTo(0,-40);context.lineTo(15,-50);context.lineTo(5,-50);context.lineTo(20,-65);context.lineTo(35,-50);context.lineTo(25,-50);context.lineTo(40,-40);context.lineTo(30,-40);context.lineTo(50,-30);context.lineWidth=4;context.strokeStyle='rgba(0,0,0,0)';context.fillStyle='green';context.fill();/*绘制树干*/lineColor(context);context.fillRect(15,-30,10,25);context.stroke();context.restore();}
function lineColor(context){var treeShadow=context.createLinearGradient(15,-30,10,25);treeShadow.addColorStop(0,"#663300");treeShadow.addColorStop(0.4,"#996600");treeShadow.addColorStop(1,"#552200");context.fillStyle=treeShadow;//绘制当前路径}draw();

html:

  <section ><div class=content> <canvas id="canvas"></canvas></div></section>

css:

 *{margin:0;padding:0;}section{width:800px;height:500px;margin:100px auto;background-color:yellow;}.content{width:100%;height:500px;background-color:green;}#canvas{width:100%;height:500px;background-color:#eee;}

canvas 画一幅画相关推荐

请帮我用一下描述画一幅画
的词汇. Sure! Let me help you describe a painting. 首先,画面颜色鲜艳,给人以活力和激情的感觉.画面中心是一个充满生机的人物,他(她)的动作非常生动,给人以 ...
给我一个BigGAN，我就能开一家美术作品店，一幅画卖200美元
晓查发自凹非寺量子位出品 | 公众号 QbitAI "你已经是个成熟的GAN,应该学会自己画画出去卖了." 今年10月,佳士得拍出一幅AI画作,而且还卖了43万美元.如果能 ...
qchart画完以后删除_画错了，重新画一幅吧！”这句话对学画画的孩子来说，伤害有多大？...
一个妈妈分享了一件事: "昨天晚上,我儿子画了一只小猪,结果画得像狗一样.我就要求他重新画一遍.听完他就哭了,还发脾气说不画了,简直气死我了!" 深海里的舞蹈家朱梓骏辅导教 ...
html5点线的设置,html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点...
如果你还不知道canvas是什么,可以看看. 在学画画的时候,线条是最基本的了,而线条的连接可以组成任何图形.在canvas中也是如此. 在开始之前我们先拿出画布和画笔: 复制代码代码如下: var ...
java小程序-画一幅海底世界的图
老师让我们画一幅鱼在水中游动的图,完成了之后我又添加了一点天空啊山峰啊太阳啊小船啊,感觉挺有意思的.本来还想画云和鸟的,时间关系就没画了. 代码其实也就是画些圆和矩形不断的在那儿鼓捣,也就没添加注释了 ...
画一幅山水画，有庐山，日出，牛
很抱歉,作为一个语言模型,我无法画画.但是,我可以用文字描述一幅山水画. 这幅画中,庐山高耸入云,群山环绕,山顶上清晨的第一缕阳光正在升起.天空由浅蓝色逐渐变成了橙色和红色,显示出日出的壮丽景象.在山 ...
用python将图片变为油画_Python也能成为毕加索？我用Python给小姐姐画了幅油画
原标题:Python也能成为毕加索?我用Python给小姐姐画了幅油画小编的舍友最近交了一个女朋友,是念艺术系的,擅长画画!长的好看又漂亮,舍友经常在我耳边吹嘘,女朋友画的油画多么漂亮. 哎...经 ...
html+js+canvas实现画板涂画功能和vue+canvas实现画板涂画功能
1,html+js+canvas实现画板涂画功能效果如下: <!DOCTYPE HTML> <html> <head><meta charset=" ...
python用turtle库画正方形_Python也可以这么“文雅”，用turtle库画一幅高傲的梅花...
文末有惊喜!!! 前言: "梅花"我们最早认识它是在小学的课本诗词中,在诗人心中是那么的文雅.坚韧,梅花是花中四君子之一,傲而不俗.好梅花就说到这里,下面讲怎样用Python画一幅 ...

canvas 画一幅画

canvas 画一幅画相关推荐

最新文章

热门文章