canvas标签的使用
<!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>
canvas标签的使用的更多相关文章
- canvas标签(1)--线条、矩形、圆形、文本、阴影、抛小球
从网上扒拉的代码,敲了敲代码玩. html页面显示内容很简单,只要写个canvas标签,给他一个id写js就可以了 <!DOCTYPE html> <html> <hea ...
- html5 canvas标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- HTML5新增Canvas标签及对应属性、API详解(基础一)
知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签 ...
- html5之canvas困惑 在canvas标签内需要设置了宽跟高,如果在css中设置同样的宽跟高,画出来的图像变形了?
<canvas class="cvs"></canvas> 遇到的问题: 如css 中设.cvs{width:500px;height:400px;},也就 ...
- HTML5 canvas标签绘制正三角形 鼠标按下点为中间点,鼠标抬起点为其中一个顶点
用html5的canvas标签绘制圆.矩形比较容易,绘制三角形,坐标确定相当于前面两种难点,这里绘制的是正三角形,比较容易,我们只需要把鼠标刚按下去的点设置为三角形的中心点,鼠标抬起的点设置为三角形右 ...
- [html5] 学习笔记-Canvas标签的使用
Canvas通过JavaScript来绘制2D图形.Canvas是逐像素渲染的.在Canvas中,一旦图形被绘制完成,它就不会继续得到浏览器的关注.如果其位置发生变化,那么整个场景也需要重新绘制,包括 ...
- HTML5的canvas标签制作黑客帝国里的简单画面
1.加入canvas标签 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> ...
- JS canvas标签动态绘制图型
使用canvas标签动态绘制图型,当点击鼠标时,以鼠标点击的坐标作为图形中心点.当点击数为偶数时画三角形,当点击数为奇数时画五角星 <!DOCTYPE HTML> <html> ...
- Canvas标签基础
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 面向对象15.3String类-常见功能-判断
/*3.判断 * 3.1两个字符串内容是否相同? * boolean equals(Object obj)(参数是Object,不是String,因为equals是覆盖Object里面的equals方 ...
- CJOJ 1131 机器分配 / Luogu 2066 机器分配 (动态规划)
CJOJ 1131 机器分配 / Luogu 2066 机器分配 (动态规划) Description Luogu: 总公司拥有高效设备M台,准备分给下属的N个分公司.各分公司若获得这些设备,可以为国 ...
- Webi Report 展示 图片链接 (Image Link)
最近由于项目需求,在生成的Webi Report中需要增加一列展示相关数据系统的图片链接,要求用户可以通过点击图片链接展示图片. 方法如下: 1,首先找到系统中图片,查看随机一张图片的属性,找到图片的 ...
- PHPCMS修改域名
有时候服务器域名解析时,需要修改网站域名,那么在phpcms中,像一些附件地址什么的都需要修改.下面介绍一下怎么系统全面的修改这些地址. 1.在后台管理中心--设置--站点管理--修改,站点域名改为新 ...
- 自己实现的数据表格控件(dataTable),支持自定义样式和标题数据、ajax等各种自定义设置以及分页自定义
一.前言 也没什么好说的嘛,用了蛮多github上开源的能够实现dataTable功能的表格插件,不过都默认绑定样式啊,数据格式也设定的比较死,所以忍不住自己实现了一个简单的可自定义样式和自定义数据返 ...
- SQL Server 数据库表的管理
上一篇文章简单梳理了一下SQL Server数据库的安装和基本操作,这篇文章主要讲述一下数据库表的管理 一.数据库的创建 有关数据库的创建有两种方式,一种是通过视图创建,第二种就是通过T-SQL语句来 ...
- Java利用内存映射文件实现按行读取文件
我们知道内存映射文件读取是各种读取方式中速度最快的,但是内存映射文件读取的API里没有提供按行读取的方法,需要自己实现.下面就是我利用内存映射文件实现按行读取文件的方法,如有错误之处请指出,或者有更好 ...
- Mybatis-Generator生成Mapper文件中<if test="criteria.valid">的问题解答
写在前面 <Docker+SpringBoot+Mybatis+thymeleaf的Java博客系统开源啦> 由于开源了项目的缘故,很多使用了My Blog项目的朋友遇到问题也都会联系我去 ...
- caffe数据读取的双阻塞队列说明
caffe的datareader类中 class QueuePair { public: explicit QueuePair(int size); ~QueuePair(); BlockingQue ...
- 基于FPGA的Uart接收图像数据至VGA显示
系统框图 前面我们设计了基于FPGA的静态图片显示,接下来我们来做做基于FPGA的动态图片显示,本实验内容为:由PC端上位机软件通过串口发送一幅图像数据至FPGA,FPGA内部将图像数据存储,最后扫描 ...