canvas画布 HTML5模板下载

最新推荐文章于 2020-04-28 19:31:55 发布

小嬴布菱

最新推荐文章于 2020-04-28 19:31:55 发布

阅读量1.2k

点赞数

本文介绍了HTML5中Canvas的基本使用方法，包括如何利用JavaScript进行绘图操作，例如绘制文本、实现渐变填充等，并提供了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本周参加了预备党员的答辩，应该是通过了【鼓掌！！！】

之后投身于微机实验，，啦啊啦，尽管很难，老师也很严格，我还是很努力的！！！

下周二准备蹭实验课了。下周三还有网络的竞赛。下周六还要考六级。呜哇哇，感觉事情好多啊。

本周学习内容较少，还望不吝赐教。

什么是 Canvas?

HTML5 元素用于图形的绘制，通过JavaScript来完成绘制

可以绘制路径,盒、圆、字符以及添加图像。

一个画布在网页中是一个矩形框。

注意: 默认情况下 元素没有边框和内容。

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成

感觉绘制文本还挺好玩的。

<canvas id="myCanvas" width="200" height="100" style="border:1px solid black"></canvas>

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.font="30px Arial";

ctx.strokeText("Hello World",10,50);//空心文本

ctx.fillText("Hello World",10,50);//实心文本

还有渐变，也很有意思。

var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"green");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);




var grd1=ctx1.createRadialGradient(75,50,5,90,60,100);
grd1.addColorStop(0,"blue");
grd1.addColorStop(1,"white");
ctx1.fillStyle=grd1;
ctx1.fillRect(10,10,150,80);

HTML5模板

以后逐渐实现一下这些模板【fighting！！！】

http://www.w3cschool.cn/html5/html5-template.html