参考

1.canvas矩形+纯色填充

 //白底ctx.fillStyle="#FFFFFF";ctx.fillRect(200,200,330,450);

2.canvas圆形+纯色填充

 //1层圆形ctx.beginPath();ctx.arc(365,395,120,0,2*Math.PI,true)ctx.closePath();ctx.fillStyle="#ffa754";ctx.fill();

3.canvas圆角矩形（偷懒用的圆角线）

 //圆角矩形1ctx.lineWidth=15;ctx.lineJoin="round";ctx.strokeStyle="white";ctx.strokeRect(545,28,10.75,60);

4.canvas阴影

    ctx.shadowColor = "rgba(0,0,0,0.5)";ctx.shadowOffsetX = 0;ctx.shadowOffsetY = 20;ctx.shadowBlur = 20;

5.canvas文本

 //DAMAVANDctx.fillStyle="black";ctx.font="bold 35px Arial";ctx.fillText("DAMAVAND",223,590);

6.canvas三角形（多边形）

    //底层三角ctx.beginPath();ctx.moveTo(225,535);ctx.lineTo(365,395);ctx.lineTo(505,535);ctx.fillStyle="#733136";ctx.fill();

7.canvas旋转图形

    ctx.rotate(45*Math.PI/180);

图例

成果

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>傻狗</title>
<style type="text/css">
.left{float:left;width:50%;height:100%;background-color: rgb(255,92,99)
}
</style>
</head>
<body><div class="left"><canvas id="tutorial" width="700" height="1200"></canvas></div>
<script type="text/javascript">
function draw(){var c=document.getElementById("tutorial");var ctx=c.getContext("2d");//白底ctx.shadowColor = "rgba(0,0,0,0.5)";ctx.shadowOffsetX = 0;ctx.shadowOffsetY = 20;ctx.shadowBlur = 20;ctx.fillStyle="#FFFFFF";ctx.fillRect(200,200,330,450);//图片背景橙色ctx.shadowOffsetX = 0;ctx.shadowOffsetY = 0;ctx.shadowBlur = 0;ctx.fillStyle="#ff9e4d";ctx.fillRect(225,225,280,310);//DAMAVANDctx.fillStyle="black";ctx.font="bold 35px Arial";ctx.fillText("DAMAVAND",223,590);//97ctx.fillStyle="#ff5c63";ctx.font="70px Arial";ctx.fillText("97",430,614);//Tehiran,IRANctx.fillStyle="black";ctx.font="lighter 20px Arial";ctx.fillText("Tehiran,IRAN",223,615);//1层圆形ctx.shadowColor = "rgba(0,0,0,0.5)";ctx.shadowOffsetX = -5;ctx.shadowOffsetY = -5;ctx.shadowBlur = 10;ctx.beginPath();ctx.arc(365,395,120,0,2*Math.PI,true)ctx.closePath();ctx.fillStyle="#ffa754";ctx.fill();//2层圆形ctx.beginPath();ctx.arc(365,395,100,0,2*Math.PI,true)ctx.closePath();ctx.fillStyle="#fe9f57";ctx.fill();//3层圆形ctx.beginPath();ctx.arc(365,395,80,0,2*Math.PI,true)ctx.closePath();ctx.fillStyle="#fd9860";ctx.fill();//4层圆形ctx.beginPath();ctx.arc(365,395,60,0,2*Math.PI,true)ctx.closePath();ctx.fillStyle="#ff7b62";ctx.fill();//底层三角ctx.shadowColor = "rgba(0,0,0,0.5)";ctx.shadowOffsetX = -5;ctx.shadowOffsetY = 0;ctx.shadowBlur = 10;ctx.beginPath();ctx.moveTo(225,535);ctx.lineTo(365,395);ctx.lineTo(505,535);ctx.fillStyle="#733136";ctx.fill();//2层三角ctx.beginPath();ctx.moveTo(260,535);ctx.lineTo(382.5,412.5);ctx.lineTo(505,535);ctx.fillStyle="#83373b";ctx.fill();//3层三角ctx.beginPath();ctx.moveTo(295,535);ctx.lineTo(400,430);ctx.lineTo(505,535);ctx.fillStyle="#a24850";ctx.fill();//上层三角ctx.beginPath();ctx.moveTo(330,535);ctx.lineTo(417.5,447.5);ctx.lineTo(505,535);ctx.fillStyle="#dd666b";ctx.fill();//挡直角的三角   ctx.shadowColor = "rgba(0,0,0,0.5)";ctx.shadowOffsetX = 0;ctx.shadowOffsetY = 0;ctx.shadowBlur = 0;ctx.beginPath();ctx.moveTo(348,411.5);ctx.lineTo(365.5,394);ctx.lineTo(383,411.5);ctx.fillStyle="#ff7b62";ctx.fill();//矩形白色挡阴影横ctx.fillStyle="white";ctx.fillRect(220,535,290,20);//矩形白色挡阴影竖ctx.fillStyle="white";ctx.fillRect(200,200,25,335);//矩形白色ctx.lineWidth=15;ctx.strokeStyle="white";ctx.rotate(45*Math.PI/180);ctx.strokeRect(560,28,45.5,5);//圆角矩形1ctx.lineWidth=15;ctx.lineJoin="round";ctx.strokeStyle="white";ctx.strokeRect(545,28,10.75,60);//圆角矩形2ctx.lineWidth=15;ctx.strokeStyle="white";ctx.strokeRect(570,28,10.75,35);//圆角矩形3ctx.lineWidth=15;ctx.strokeStyle="white";ctx.strokeRect(595,28,10.75,10);
}
draw();
</script>
</body>
</html>

canvas练习第1天--阳光下的雪山（无动效）相关推荐

canvas练习第2天--剪纸风格海报（无动效）
目录参考图例成果代码参考 1.canvas二次贝塞尔曲线闭合填充图形 //二层dtx.beginPath();//一定要有开始dtx.moveTo(380,200);dtx.quadrati ...
暗夜发光,独自闪耀,盘点网页暗黑模式(DarkMode)下的特效和动效,CSS3实现
众所周知,网页的暗黑模式可以减少屏幕反射和蓝光辐射,减少眼睛的疲劳感,特别是在夜间使用时更为明显.其实暗黑模式也给霓虹灯效应(Neon Effect)提供了发挥的环境. 霓虹灯效应是一种视觉效果,其特 ...
WebQML笔记-qml获取canvas中元素是否被按下
以前出了几个用QWebView,获取html前端数据的博文, 使用QWebElement可以直接获取html中元素的填充的值. 在此不在多提.这个是纯QML获取canvas中元素是否被按下的思路. 这 ...
TFT LCD显示屏在阳光下可读
显示屏作为公共场所广泛使用的电器,高亮度液晶显示屏越来越被人们所选择. 那么为什么越来越多的人想选择高亮度TFT LCD 显示屏? 阳光下的可读性显示屏使我们即使在阳光直射下也能看到清晰锐利的图像或视 ...
阳光下可读显示技术的工作原理
阳光下可读的显示技术是大多数工业户外应用的理想设计,例如建筑工地.海洋任务.军事行动.林业等.需要甚至依靠坚固耐用的 LCD 显示器发展的工业操作可以从阳光下可读的显示技术中获益最多,因为它们通常需要 ...
设计低反射率触摸屏显示器以实现阳光下的可读性
什么会影响触摸屏显示器在阳光下的可读性? 将触摸传感器放置在显示器顶部会增加设备的整体反射率,这会直接影响显示器在明亮条件下的可读性,尤其是在阳光明媚的户外.这不仅会影响经常在户外使用的移动设备,还会 ...
阳光事业必须在阳光下进行
在不久的将来,中国将成为世界科技强国,00后大学生是那时的国家"顶梁柱",需要在学校学习期间打好基础数学的"底子". 2001年,"知识共享" ...
00后大学生在数学真理阳光下学习微积分
在上世纪30年代,著名数学家哥德尔证明了模型论紧致性定理.紧接着,1960年,美国数学家鲁宾逊依据哥德尔紧致性定理,创立了现代微积分.这就是数学真理的阳光. 2018年高考,今天结束了.速许多00后考 ...
汇报：阳光事业在阳光下进行
今年8月5日,我们发出预告:电子版微积分向全国高校投放安排,阳光事业在阳光下进行,时至今日,刚好"满月".阅读人数高达8839,距离珠峰高度还差9米. ...

canvas练习第1天--阳光下的雪山（无动效）

目录

参考

图例

成果

代码

canvas练习第1天--阳光下的雪山（无动效）相关推荐

最新文章

热门文章