欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

html5:canvas

程序员文章站 2022-05-24 08:34:33
...
1.什么是canvas?

可以绘制图形的标签。一般用javascript来绘制。

2.创建一个画布


 //创建画布用canvas标签

3.在画布上绘图。


4.canvas-路径

var can=document.getElementById("mycanvas");
    var draw=can.getContext("2d");
    // 开始一个路径
    draw.beginPath();
    // 设置线的粗细
    draw.lineWidth="5";
    //设置线的颜色
    draw.strokeStyle="green";
    // 线的起点
    draw.moveTo(0,75);
    //线的终点 
    draw.lineTo(250,75);
    // 开始绘制路径
    draw.stroke();
    //开始另一个路径
    draw.beginPath();
    // 设置线的粗细
    draw.lineWidth="5";
    draw.strokeStyle="purple";
    draw.moveTo(25,05);
    draw.lineTo(35,25);
    draw.stroke();

效果:

html5:canvas

相关标签: html5:canvas