<!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标签的使用的更多相关文章

  1. canvas标签(1)--线条、矩形、圆形、文本、阴影、抛小球

    从网上扒拉的代码,敲了敲代码玩. html页面显示内容很简单,只要写个canvas标签,给他一个id写js就可以了 <!DOCTYPE html> <html> <hea ...

  2. html5 canvas标签

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. HTML5新增Canvas标签及对应属性、API详解（基础一）

    知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签 ...

  4. html5之canvas困惑 在canvas标签内需要设置了宽跟高，如果在css中设置同样的宽跟高，画出来的图像变形了？

    <canvas class="cvs"></canvas> 遇到的问题: 如css 中设.cvs{width:500px;height:400px;},也就 ...

  5. HTML5 canvas标签绘制正三角形 鼠标按下点为中间点，鼠标抬起点为其中一个顶点

    用html5的canvas标签绘制圆.矩形比较容易,绘制三角形,坐标确定相当于前面两种难点,这里绘制的是正三角形,比较容易,我们只需要把鼠标刚按下去的点设置为三角形的中心点,鼠标抬起的点设置为三角形右 ...

  6. [html5] 学习笔记-Canvas标签的使用

    Canvas通过JavaScript来绘制2D图形.Canvas是逐像素渲染的.在Canvas中,一旦图形被绘制完成,它就不会继续得到浏览器的关注.如果其位置发生变化,那么整个场景也需要重新绘制,包括 ...

  7. HTML5的canvas标签制作黑客帝国里的简单画面

    1.加入canvas标签 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> ...

  8. JS canvas标签动态绘制图型

    使用canvas标签动态绘制图型,当点击鼠标时,以鼠标点击的坐标作为图形中心点.当点击数为偶数时画三角形,当点击数为奇数时画五角星 <!DOCTYPE HTML> <html> ...

  9. Canvas标签基础

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Watson Explorer Analytical Components 1

    Introduction: IBM Watson Explorer Analytical Components(AC) which is part of the IBM Watson Explorer ...

  2. Vuejs——v-on

    版权声明:出处http://blog.csdn.net/qq20004604   目录(?)[+]   资料来于官方文档: http://cn.vuejs.org/guide/events.html ...

  3. 详细解析 JavaScript 获取元素的坐标

    引言 最近突然看到了有关图片懒加载的问题,大致意思就是初始状态下页面只加载浏览器可视区域的图片,剩余图片在当浏览器可视区域滚动到其位置时才开始加载.貌似现在许多大型网站都有实现懒加载,所以我便就此问题 ...

  4. tp5实现邮件发送

    项目中,用户修改密码,需要发送验证码到用户邮箱,于是就看了看,在此记录一下. 1.开启SMTP服务 测试用的是自己的qq邮箱,首先需要开启邮箱的SMTP服务,开启之后,要记得给你的授权码,授权码一定要 ...

  5. springmvc(三) 参数绑定、

    前面两章就介绍了什么是springmvc,springmvc的框架原理,并且会简单的使用springmvc以及ssm的整合,从这一章节来看,就开始讲解springmvc的各种功能实现,慢慢消化 --W ...

  6. Struts2+Spring+Hibernate+Jbpm技术实现Oa（Office Automation）办公系统第一天框架搭建

    =============编码规范,所有文健,所有页面,所有数据库的数据表都采用UTF-8编码格式,避免乱码:===========开发环境:jdk1.7+tomcat8.0+mysql5.7+ecl ...

  7. css中的层叠性及权重的比较

    假如同一个标签被多个选择器选中,每个选择器都设置了相同的样式,浏览器中加载时这个样式听谁的? 不同选择器设置的同一个样式,只会选择一个进行加载,不会叠加. 为了解决听谁的问题,引入层叠性的概念. 层叠 ...

  8. 谈谈final, finally, finalize的区别

    final 修饰符(关键字)如果一个类被声明为final,意味着它不能再派生出新的子类,不能作为父类被继承.因此一个类不能既被声明为 abstract的,又被声明为final的.将变量或方法声明为fi ...

  9. 学习笔记TF027:卷积神经网络

    卷积神经网络(Convolutional Neural Network,CNN),可以解决图像识别.时间序列信息问题.深度学习之前,借助SIFT.HoG等算法提取特征,集合SVM等机器学习算法识别图像 ...

  10. （转）Centos搭建FTP服务器

    场景:ftp服务器对于在Linux服务器上进行文件操作太方便,在安装软件时候,大的软件也可以先上传再进行安装! 1 搭建FTP服务器 1.1 检查vsftpd 查看是否已经安装vsftpd rpm - ...