您现在的位置是:孟垂博自媒体博客 ✈ 学习笔记

html5属性canvas的常识学习

10-06最后更新时间:2019-12-03已收录人已围观收藏

简介1.<canvas id="myCanvas" width="200" height="100"></canvas> 一定要指定一个id,方便获取改位置的元素。
2.用js完成内部的绘图工作。
var c=document.getElementById("my

1.<canvas id="myCanvas" width="200" height="100"></canvas>  一定要指定一个id,方便获取改位置的元素。
2.用js完成内部的绘图工作。
var c=document.getElementById("myCanvas");    获取id
var ctx=c.getContext("2d"); 创建 context 对象,getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
ctx.fillStyle="#FF0000"; fillStyle属性可以是CSS颜色,渐变,或图案
ctx.fillRect(0,0,150,75); fillRect(x,y,width,height) 方法定义了矩形当前的填充
ctx.moveTo(0,0);   开始坐标
ctx.lineTo(200,100); 结束坐标
ctx.stroke();  画线条
ctx.arc(95,50,40,0,2*Math.PI); 画圆
ctx.font="30px Arial"; 定义字体
ctx.fillText("Hello World",10,50);  定义实心的字体
ctx.strokeText("Hello World",10,50); 定义空心的字体
var grd=ctx.createLinearGradient(0,0,200,0);  创建线条渐变
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
var grd=ctx.createRadialGradient(75,50,5,90,60,100); 创建径向渐变
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
var img=document.getElementById("scream");  把img放在画布上
ctx.drawImage(img,10,10);


 
《html5属性canvas的常识学习.doc》
将本文的Word文档下载到电脑,方便收藏和打印
推荐度:
点击下载文档

文档为doc格式

很赞哦! ()

文章评论

站点信息

  • 建站时间2019年06月15日
  • 网站程序:帝国CMS7.5
  • 博客模板:可免费共享
  • 文章统计:161篇文章
  • 时间卷轴时间轴
  • 标签管理标签云
  • 网站地图XML网站地图
  • 微信二维码:扫描一下,你我就是有缘