文档章节

canvas标签的使用

Akillua
 Akillua
发布于 2017/07/27 10:55
字数 368
阅读 5
收藏 0
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas test</title>
</head>
<body>
<!--矩形填充,fill指填充当前绘图(路径)-->
<canvas id="myCanvas1">your browser does not support the canvas tag </canvas>

<script type="text/javascript">

    var canvas=document.getElementById('myCanvas1');
    var ctx=canvas.getContext('2d');
    ctx.fillStyle='#FF0000';
    ctx.shadowBlur=20;
    ctx.shadowColor="gray";
    ctx.fillRect(20,20,80,100);

</script>

<!--矩形描边,stroke指绘制已定义的路径-->
<canvas id="myCanvas0">your browser does not support the canvas tag </canvas>

<script type="text/javascript">
    var canvas=document.getElementById('myCanvas0');
    var ctx=canvas.getContext('2d');
    ctx.strokeRect(20,20,80,100);

</script>

<!---->
<canvas id="arc" width="200px" height="200px" style="border:1px solid gray"></canvas>
<script>
    var arc=document.getElementById("arc");
    ctx=arc.getContext("2d");
    ctx.strokeStyle="red";
    ctx.beginPath();
    ctx.arc(100,100,50,0,2*Math.PI);
    ctx.arc(100,100,70,0,2*Math.PI);
    ctx.stroke();
</script>

<!--绘制线条-->
<canvas id="line" width="200px" height="200px" style="border:1px solid gray"></canvas>
<script>
    var line=document.getElementById("line");
    ctx=line.getContext("2d");
    ctx.fillStyle="red";
    ctx.moveTo(0,0);
    ctx.lineTo(100,100);
    ctx.lineTo(200,0);
    ctx.lineTo(200,150);
    ctx.lineTo(0,150);
    ctx.lineTo(0,0);
    ctx.fill();

</script>

<!--文本-->
<canvas id="txt" width="200px" height="200px" style="border:1px solid red">您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
    var txt=document.getElementById("txt");
    var text=txt.getContext("2d");
    text.font="60px 微软雅黑";
    text.fillText("练习",40,110);

</script>

<!--文本空心-->
<canvas id="txt1" width="200px" height="200px" style="border:1px solid red">您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
    var txt=document.getElementById("txt1");
    var text=txt.getContext("2d");
    text.strokeStyle="red"
    text.font="60px 微软雅黑";
    text.strokeText("练习",40,110);

</script>

<!--渐变-->
<canvas id="gradient" width="200px" height="200px" style="border:1px solid red"></canvas>
<script>
    var c=document.getElementById("gradient");
    var text=c.getContext("2d");

    <!--线性渐变-->
    var gra=text.createLinearGradient(0,0,0,200);
    gra.addColorStop(0,'red');
    gra.addColorStop(1,'#000');
    text.fillStyle=gra;
    text.fillRect(0,0,200,200);
</script>

<canvas id="gradient2" width="200px" height="200px" style="border:1px solid red"></canvas>
<script>
    var c=document.getElementById("gradient2");
    var text=c.getContext("2d");

    <!--径向渐变-->
    var lin=text.createRadialGradient(100,100,30,100,100,100);
    lin.addColorStop(0,'#fff');
    lin.addColorStop(1,'#000');
    text.fillStyle=lin;
    text.fillRect(0,0,200,200);
</script>
</body>
</html>

 

© 著作权归作者所有

上一篇: css3动画animation
Akillua
粉丝 0
博文 43
码字总数 19935
作品 0
郑州
私信 提问
《WebGL编程指南》学习笔记——2.WebGL概述

上一节初步认识了WebGL,这一小节我们来开始学习使用< canvas >元素绘制二维图形 下小节我们正式开始学习如何在< canvas >中使用WebGL WebGL采用HTML5中新引入的元素,它定义了网页上的绘图区...

hushhw
2017/12/16
0
0
《WebGL编程指南》学习笔记——2.使用元素

版权声明:欢迎访问http://hushhw.cn (我的个人博客) https://blog.csdn.net/hushhw/article/details/78821908 《WebGL编程指南》学习笔记——2.使用< canvas >元素 上一节初步认识了WebGL...

hushhw
2017/12/16
0
0
【黑科技】React-canvas助力HTML5

1、什么是流畅的用户体验? 游戏的开发界有一个理论,就是当动画或者交互响应达到60FPS(60帧每秒)的时候,就可以定义为流畅,按此理论,那么每帧里所有操作必须在16ms完成。要想提高页面的用...

TNFE
05/17
0
0
使用excanvas时的常见问题

HTML5标准已经发布一段时间了,新标准中强大的绘图能力和嵌入多媒体能力备受关注,canvas标签无疑是HTML5的一大招牌。IE6、7、 8原本不支持canvas标签,google提供了一个有效的解决方法Explo...

红薯
2011/11/05
2.3K
0
三天学会HTML5——SVG和Canvas的使用

在第一天学习了HTML5的一些非常重要的基本知识,今天将进行更深层学习 首先来回顾第一天学习的内容,第一天学习了新标签,新控件,验证功能,应用缓存等内容。 第2天将学习如何使用Canvas 和...

葡萄城控件技术团队
2016/02/04
224
0

没有更多内容

加载失败,请刷新页面

加载更多

好文:华杉:我等用功,不求日增,但求日减。减一分人欲,则增一分天理,这是何等简易!何等洒脱!

#写在前面1.怎么理解“减一分人欲,则增一分天理,这是何等简易!”?1)华杉提倡 “一劳永逸” 排除浪费,少干活,多赚钱,一战而定,降低作业成本。2)华杉提倡学海无涯,回头是岸...

阿锋zxf
18分钟前
1
0
vue 的bus总线

bus声明 global.bus = new Vue() 事件发送 controlTabbar () {global.bus.$emit('pickUp', 'ddd')}, 事件接收 global.bus.$on('pickUp', (res) => {this.isFocus = true})......

Js_Mei
23分钟前
2
0
大型系统演进之路-负载均衡演进

Nginx做负载均衡 通过Nginx的反向代理将请求分发到tomcat中,如果tomcat支持100并发,Nginx支持50000并发,理论上nginx把请求发送到500个tomcat就可以了。 LVS或F5做多个Nginx负载均衡 Tomc...

春哥大魔王的博客
28分钟前
4
0
Sqlite时间段查询中遇到的问题

问题: 我要查询DateTime时间其中的一段符合时间要求的数据,比如我要查询‘2019-06-06 16:50:00’至‘2019-06-06 16:59:00’这一段的数据 开始用这段代码 strSql= ("select * from Coll...

rainbowcode
32分钟前
2
0
大数据(hadoop-数据入库系统Sqoop原理架构)

Sqoop是什么 Sqoop:SQL-to-Hadoop 连接传统关系型数据库和Hadoop的桥梁 把关系型数据库的数据导入到 Hadoop 系统 ( 如 HDFS、HBase 和 Hive) 中; 把数据从 Hadoop 系统里抽取并导出到关系型...

这很耳东先生
47分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部