新标签canvas

原创 2018年04月17日 14:58:00
<canvas id='canvas' width='500' height='500'>您的浏览器暂不支持HTML5的canvas元素</canvas>
<script>
   var canvas=document.getElementById('canvas'); //获取canvas元素
   var c=canvas.getContext('2d'); //绘制2d
   c.lineEidth=10; //线条宽度
   c.strokeStyle='blue'; //线条颜色
   c.moveTo('50','50'); //开始坐标点
   c.lineTo('200','50'); //绘制到坐标点
   c.lineTo('200','150'); //绘制到坐标点
   c.closePath(); //闭合线条
   c.stroke(); //开始绘制边框
   //--------------------------------------------------------------------绘制矩形
   c.beginPath(); //绘制另外一个图形
   c.strokeRect('50','50','100','150'); //绘制矩形,x坐标,y坐标,宽,高
   //--------------------------------------------------------------------绘制实心
   c.beginPath(); //绘制另外一个图形
   c.strokeStyle='red'; //线条颜色
   c.fillStyle='red'; //填充颜色
   c.rect('50','50','100','150'); //绘制矩形,x坐标,y坐标,宽,高
   c.fill(); //开始绘制实心
   //--------------------------------------------------------------------绘制实心矩形
   c.beginPath(); //绘制另外一个图形
   c.strokeStyle='red'; //线条颜色
   c.fillStyle='red'; //填充颜色
   c.fillRect('50','50','100','150'); //绘制矩形,x坐标,y坐标,宽,高
   //--------------------------------------------------------------------绘制圆,圆弧
   c.beginPath(); //绘制另外一个图形
   c.strokeStyle='red'; //线条颜色
   c.fillStyle='red'; //填充颜色
   c.arc(50,50,10,0,Math.PI); //绘制圆,圆心x,圆心y,半径,起始角度,结束角度,true/false是顺/逆时针,Math.PI是半圆乘2是圆,
   c.stroke(); //开始绘制边框
   //--------------------------------------------------------------------绘制实心圆,圆弧
   c.beginPath(); //绘制另外一个图形
   c.moveTo('250','250'); //开始坐标点
   c.arc(250,250,100,Math.PI*7/6,Math.PI*11/6); //绘制圆,圆心x,圆心y,半径,起始角度,结束角度,true/false是顺/逆时针,Math.PI是半圆乘2是圆,
   c.fill(); //开始绘制实心
   //--------------------------------------------------------------------绘制实心扇形(其实就是两个扇形)
   c.beginPath(); //绘制另外一个图形
   c.moveTo('250','250'); //开始坐标点
   c.arc(250,250,100,Math.PI*7/6,Math.PI*11/6); //绘制圆,圆心x,圆心y,半径,起始角度,结束角度,true/false是顺/逆时针,Math.PI是半圆乘2是圆,
   c.fill(); //开始绘制实心
   //--------------------------------------------------------------------绘制空心,实心文字
   c.beginPath(); //绘制另外一个图形
   c.strokeStyle='red'; //线条颜色
   c.fillStyle='red'; //填充颜色
   c.font='50px 隶书' //字体大小,字体类型
   c.strokeRext('字',20,20) //绘制空心文字,字,x坐标,y坐标
   c.fillRext('字',20,20) //绘制实心文字,字,x坐标,y坐标
   //--------------------------------------------------------------------创造线性渐变
   去我要自学网看html5视频
</script>

html5中的canvas和svg的使用

一、canvas
  • meandmyself
  • meandmyself
  • 2015-05-05 12:03:41
  • 904

Canvas H5的新特性

从1999年出来的Html4,到2007年定义的H5,H5新增加了很多控件元素,         HTML5 中的一些有趣的新特性: 用于绘画的 canvas 元素用于...
  • u011730649
  • u011730649
  • 2015-01-21 10:15:31
  • 1306

HTML5新标签<canvas>

概述 Canvas API(画布)用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用JavaScript操作的位图(bitmap)。 使用前,首先需要新建一个网页元素。...
  • mafan121
  • mafan121
  • 2017-03-10 15:38:31
  • 283

html5-canvas标签用法

canvas是HTML5中新定义的标签,顾名思义,它本身是一个画布标签,没有自己的行为,只是一个图形容器,必须使用脚本来绘制图形。下面是它用法的示例: Your browser does not su...
  • may_apple
  • may_apple
  • 2016-01-21 09:43:07
  • 1193

HTML之Canvas标签及对应属性、API详解

听说HTMl很火,自己也是借了几本书,想深刻了解一下,翻书一看,又惊又喜,这不是在大学还学过半年呢嘛,毕业设计就是和这个网页设计相关的,正好,前边几章大致翻阅一下复习,着重看了后边的章节,今天看了一个...
  • baidu_31683691
  • baidu_31683691
  • 2016-06-14 10:37:26
  • 2485

一个canvas demo, 用到了三个canvas标签

插入图片      #wrap{        border:2px dashed red;        background-color:green;      }      #wr...
  • u012028371
  • u012028371
  • 2016-08-12 14:15:38
  • 643

<canvas>标签的使用(图形学初步?)

标签的使用,涉及部分图形学知识。
  • nnhywgk
  • nnhywgk
  • 2017-09-19 10:08:04
  • 432

绚丽的canvas倒计时效果

  • 2014年11月04日 11:13
  • 11KB
  • 下载

html5中关于canvas标签用法(绘图)

HTML 5 标签 标签定义图形,比如图表和其他图像。 标签只是图形容器,您必须使用脚本来绘制图形。 用canvas配合javascript可以直接在html页面动态绘...
  • yunfuyiren
  • yunfuyiren
  • 2014-01-13 21:29:55
  • 1125

HTML5+CSS3页面

  • 2015年08月08日 22:53
  • 6.1MB
  • 下载
收藏助手
不良信息举报
您举报文章:新标签canvas
举报原因:
原因补充:

(最多只允许输入30个字)