canvas 基础

来源：互联网发布：352空气净化器知乎编辑：程序博客网时间：2024/05/17 22:05

标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。

这里写代码片<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>canvas基础</title></head><body><canvas id="canvas" style="display: block;margin: 10px auto;border: 1px solid peachpuff;"></canvas><script>    window.onload=function () {        var canvas=document.getElementById("canvas");        canvas.width=1024;        canvas.height=768;        var context=canvas.getContext("2d");        context.beginPath();  //开始新的路径 多个路径        context.moveTo(100,100);  //起始点        context.lineTo(700,700);   //中间点        context.lineTo(100,700);   ////中间点        context.lineTo(100,100);  //结束点   可以绘制出各种形状        context.closePath();   //结束当前路径//        context.fillStyle="rgb(2,100,30)";  //填充的颜色//        context.fill();  //填充        context.lineWidth=5;  //边框宽度        context.strokeStyle="red";  //绘制所使用的颜色        context.stroke();   //绘制线条        context.beginPath();  // //开始新的路径        context.moveTo(200,100);        context.lineTo(700,600);        context.closePath();   ////结束当前路径        context.strokeStyle="black";        context.stroke();    }</script></body></html>

0 0