1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>canvas test</title>
  6. </head>
  7. <body>
  8. <!--矩形填充,fill指填充当前绘图（路径）-->
  9. <canvas id="myCanvas1">your browser does not support the canvas tag </canvas>
  10.  
  11. <script type="text/javascript">
  12.  
  13.     var canvas=document.getElementById('myCanvas1');
  14.     var ctx=canvas.getContext('2d');
  15.     ctx.fillStyle='#FF0000';
  16.     ctx.shadowBlur=20;
  17.     ctx.shadowColor="gray";
  18.     ctx.fillRect(20,20,80,100);
  19.  
  20. </script>
  21.  
  22. <!--矩形描边,stroke指绘制已定义的路径-->
  23. <canvas id="myCanvas0">your browser does not support the canvas tag </canvas>
  24.  
  25. <script type="text/javascript">
  26.     var canvas=document.getElementById('myCanvas0');
  27.     var ctx=canvas.getContext('2d');
  28.     ctx.strokeRect(20,20,80,100);
  29.  
  30. </script>
  31.  
  32. <!--圆-->
  33. <canvas id="arc" width="200px" height="200px" style="border:1px solid gray"></canvas>
  34. <script>
  35.     var arc=document.getElementById("arc");
  36.     ctx=arc.getContext("2d");
  37.     ctx.strokeStyle="red";
  38.     ctx.beginPath();
  39.     ctx.arc(100,100,50,0,2*Math.PI);
  40.     ctx.arc(100,100,70,0,2*Math.PI);
  41.     ctx.stroke();
  42. </script>
  43.  
  44. <!--绘制线条-->
  45. <canvas id="line" width="200px" height="200px" style="border:1px solid gray"></canvas>
  46. <script>
  47.     var line=document.getElementById("line");
  48.     ctx=line.getContext("2d");
  49.     ctx.fillStyle="red";
  50.     ctx.moveTo(0,0);
  51.     ctx.lineTo(100,100);
  52.     ctx.lineTo(200,0);
  53.     ctx.lineTo(200,150);
  54.     ctx.lineTo(0,150);
  55.     ctx.lineTo(0,0);
  56.     ctx.fill();
  57.  
  58. </script>
  59.  
  60. <!--文本-->
  61. <canvas id="txt" width="200px" height="200px" style="border:1px solid red">您的浏览器不支持 HTML5 canvas 标签。</canvas>
  62. <script>
  63.     var txt=document.getElementById("txt");
  64.     var text=txt.getContext("2d");
  65.     text.font="60px 微软雅黑";
  66.     text.fillText("练习",40,110);
  67.  
  68. </script>
  69.  
  70. <!--文本空心-->
  71. <canvas id="txt1" width="200px" height="200px" style="border:1px solid red">您的浏览器不支持 HTML5 canvas 标签。</canvas>
  72. <script>
  73.     var txt=document.getElementById("txt1");
  74.     var text=txt.getContext("2d");
  75.     text.strokeStyle="red"
  76.     text.font="60px 微软雅黑";
  77.     text.strokeText("练习",40,110);
  78.  
  79. </script>
  80.  
  81. <!--渐变-->
  82. <canvas id="gradient" width="200px" height="200px" style="border:1px solid red"></canvas>
  83. <script>
  84.     var c=document.getElementById("gradient");
  85.     var text=c.getContext("2d");
  86.  
  87.     <!--线性渐变-->
  88.     var gra=text.createLinearGradient(0,0,0,200);
  89.     gra.addColorStop(0,'red');
  90.     gra.addColorStop(1,'#000');
  91.     text.fillStyle=gra;
  92.     text.fillRect(0,0,200,200);
  93. </script>
  94.  
  95. <canvas id="gradient2" width="200px" height="200px" style="border:1px solid red"></canvas>
  96. <script>
  97.     var c=document.getElementById("gradient2");
  98.     var text=c.getContext("2d");
  99.  
  100.     <!--径向渐变-->
  101.     var lin=text.createRadialGradient(100,100,30,100,100,100);
  102.     lin.addColorStop(0,'#fff');
  103.     lin.addColorStop(1,'#000');
  104.     text.fillStyle=lin;
  105.     text.fillRect(0,0,200,200);
  106. </script>
  107. </body>
  108. </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 3 - use case scenarios

    The followings are the user case scenarios that WEX can be used for generating value. 1.Customer Ins ...

  2. WPF WebBrowser Memory Leak 问题及临时解决方法

    首先介绍一下内存泄漏(Memory Leak)的概念,内存泄露是指程序中已动态分配的堆内存由于某种原因未释放或者无法释放,造成系统内存的浪费,导致程序运行速度减慢甚至系统崩溃等严重后果. 最近在使用W ...

  3. dfs.datanode.max.transfer.threads

    An HDFS DataNode has an upper bound on the number of files that it will serve at any one time: <p ...

  4. 使用JS开发桌面端应用程序NW.js-3-开发问题小记

    前言 因为我们的项目是2C的,而XP系统是最大的用户量占比,所以只能使用nw开发而不能用Electron,本文谨记开发nw过程中遇到的各种问题以及解决方案. nw.Window.open打开新窗口不能 ...

  5. 面向对象15.1String类特点

    String 特点: 字符串对象一旦被初始化就不会被改变. public class Ssstring {public static void main(String[] args) { //这个是2 ...

  6. hdu_4717: The Moving Points 【三分】

    题目链接 第一次写三分 三分的基本模板 int SanFen(int l,int r) //找凸点 { ) { //mid为中点,midmid为四等分点 ; ; if( f(mid) > f(m ...

  7. 51nod_1831: 小C的游戏（Bash博弈 找规律）

    题目链接 此类博弈不需要考虑sg函数,只需要确定必胜态和必败态,解题思路一般为打败先打表找规律,而后找规律给出统一的公式.打表方式:给定初始条件(此题中为ok[0]=ok[1]=0),然后从低到高枚举 ...

  8. Linux下Tomcat8.0.44安装使用Apr

    听说Apr可以提高tomcat很多的性能,配置具体如下1.安装apr 1.5.2 [root@ecs-3c46 ]# cd /usr/local/src [root@ecs-3c46 src]# wg ...

  9. ES6中的类

    前面的话 大多数面向对象的编程语言都支持类和类继承的特性,而JS却不支持这些特性,只能通过其他方法定义并关联多个相似的对象,这种状态一直延续到了ES5.由于类似的库层出不穷,最终还是在ECMAScri ...

  10. [补档]暑假集训D2总结

    %dalao https://hzoi-mafia.github.io/2017/07/26/17/ (纪念我已死去的github) 大佬AntiLeaf来讲概率&期望,然后--成功变为 不可 ...