HTML画布01

最新推荐文章于 2024-12-25 06:10:28 发布

原创最新推荐文章于 2024-12-25 06:10:28 发布 · 375 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML5 #canvas

HTML5 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了HTML5的canvas元素，强调canvas并非直接绘图，而是通过JavaScript进行操作。讲解了canvas的默认尺寸设定，如何用js修改尺寸，并提供了解决浏览器不支持canvas的替代内容方法。重点阐述了获取绘图上下文的必要性，特别是`getContext('2d')`和`getContext('3d')`的区别。接着，详细讨论了在2d环境中绘制直线的方法，包括`moveTo`、`lineTo`、`stroke`和`strokeStyle`的使用，以及渐变赋值方式。

canvas 本身没有绘图能力，所有的绘图都由js完成，常用js的getElementById获得canvas(标签id)

注：

1.若canvas未设置高度，浏览器默认设置为300*100px，且不能使用css设置(会被拉伸)

js设置：a.width=200;a.height=100;(a为canvas对象)

2.如浏览器不支持canvas功能，可在标签中写一些替换内容eg:<canvas>你的浏览器不支持</canvas>

getContext()：该方法是canvas的绘图对象/方法,canvas执行绘图前，必须获取该对象。

注：

1.getContext("2d")表示该canvas的绘图环境为2d平面(可绘制文本、直线、弧线、矩形、圆形等)

2.getContext("3d")表示……为3d

直线:

<script type="text/javascript">

    var c=document.getElementById("xx");

    var ctx=c.getContext("2d");

    ctx.moveTo(10,10);

    ctx.lineTo(150,50);

    ctx.stroke();

</script>

注：

1.moveTo(x坐标,y坐标):理解为画笔在画布上的位置(坐标是相对于画布而言，最左上角的坐标是(0,0));

2.lineTo(x,y):从画笔位置画一条直线至某一点，需知此方法仅做路径运动，而不存在视觉上的绘图效果（上色、描边）

3.stroke()描边方法

4.strokeStyle来设置描边颜色，写在stroke之前:eg:ctx.strokeStyle="red";

5.beginpath():可以做到隔离路径绘制效果的作用，防止之前的效果被污染

closepath()：会将图形封闭，对fill无效

NEW：strokeStyle的赋值方式

ctx.strokeStyle=color | gradient | pattern

1.color赋值：和常规的css一样，同样支持css3：color/颜色十六进制/rgb/rgba

2.gradient:渐变

<script type="text/javascript">

    var c=document.getElementById("xx");

    var ctx=c.getContext("2d");

    var grd=ctx.createlinearGradient(0,0,170,0);

    //定义渐变对象，设定渐变线起点和终点。格式：（起点x,起y,终x,终y）

    grd.addColorStop(0,"black");//定义渐变起点颜色

    grd.addColorStop(0.5,"red");//定义中间点颜色

    frd.addColorStop(1,"yellow");//定义结束点颜色

    ctx.strokeStyle=grd;//渐变对象给ctx

    ctx.stroke();//描边

</script>

注：1.LinearGradient线性渐变2.RadialGradient放射状/圆形渐变