canvas元素
主要使用 JavaScript 在网页上绘制图像画布是一个矩形区域,可以控制其每一像素而且canvas 拥有多种绘制路径、矩形、圆形、以及添加图像的方法,此时此刻呢将在文章中为大家详细介绍
html代码
矩形
fillStyle:用来给图形添加色彩的
fillRect(x,y,width,height)
x:距离左上角的x值
y:距离左上角的y值
width,height:就是图形的宽高
var demo=document.getElementById("demo");
fang.fillStyle="pink";
线条
moveTo:线条开始位置
lineTo:结束位置
lineWidth:线条宽度
strokeStyle:颜色
stroke:开始绘制
xian.moveTo(10,10);
xian.lineTo(100,100);
xian.strokeStyle="pink";
xian.stroke();
圆形
beginPath():开始路径
arc(x,y,r,sAngle,eAngle,counterclockwise)
x,y:为圆的中心点坐标
r:圆的半径
sAngle,eAngle:圆的起始角和结束角
counterclockwise:可写可不写规定应该逆时针还是顺时针绘图.False = 顺时针,true = 逆时针.
yuan.beginPath();
yuan.strokeStyle="pink";
yuan.stroke();
drawImage(img,sx,sy,swidth,sheight,x,y,width,height)
sx,sy:剪切的 x,y 坐标位置
swidth,sheight:被剪切图像的宽度和高度
x,y:在画布上放置图像的 x,y 坐标位置
width,height:要使用的图像的宽度和高度
var img1=document.getElementById("img1");
img1.onload=function(){
总结:
html canvas标签用于定义图形,比表和其他图像,标签只是图形容器,通过脚本 (通常是JavaScript)来完成,可以使用canvas绘制路径,盒、圆、字符以及添加图像.
canvas是什么意思?html canvas标签怎么用?
作用:定义图形,比表和其他图像.
说明:
标签只是图形容器,通过脚本 (通常是JavaScript)来完成,可以使用canvas绘制路径,盒、圆、字符以及添加图像.
注释:
html canvas标签 示例
your browser does not support the canvas tag
以上就是土嘎嘎小编大虾米为大家整理的相关主题介绍,如果您觉得小编更新的文章只要能对粉丝们有用,就是我们最大的鼓励和动力,不要忘记讲本站分享给您身边的朋友哦!!