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

html5属性canvas的常识学习

10-06最后更新时间：2024-04-16【已收录】人已围观收藏

简介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);

属性