zoukankan html css js c++ java

canvas直线学习

1.如何在HTML5中添加canvas元素

canvas元素的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas0213</title>
    <style type="text/css">
        canvas{background:#A9A9A0}
    </style>
</head>
<body>
    <canvas id="mycanvas" width="500" height="300">
        您的浏览器暂不支持HTML5的canvas元素
    </canvas>
</body>
</html>

2.了解canvas坐标系

3.了解script元素

4.绘制一条直线

指定线宽： lineWidth=数值

指定颜色：strokeStyle=颜色值（只适用用轮廓，线段等填充色用：fillStyle=颜色值）

canvas的路径方法

设定起点：moveTo(x坐标，y坐标）

设定终点：lineTo(x坐标，y坐标)

开始绘制:stroke（）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas0213</title>
    <style type="text/css">
        canvas{background:#A9A9A0}
    </style>
</head>
<body>
    <canvas id="mycanvas" width="500" height="300">
        您的浏览器暂不支持HTML5的canvas元素
    </canvas>
    <script type="text/javascript">
        var canvas=document.getElementById('mycanvas');//定义变量获取画布DOM
        var context=canvas.getContext('2d');//设置绘图环境为2d
        context.moveTo(0,0);
        context.lineTo(500,300);
        context.lineTo(0,300);
        context.lineTo(500,0);
        context.lineTo(0,150);
        context.lineTo(500,150);
        context.lineTo(0,0);
        context.lineTo(0,300);
        context.lineTo(500,150);
        context.lineTo(500,300);
        context.lineTo(0,150);        
context.stroke();//绘制方法　　　　　

context.moveTo(0,0);

context.lineTo(500,0);

context.lineTo(500,150);


    </script>
</body>
</html>

5.给直线添加样式
strokeStyle属性：设置颜色、渐变或模式
lineWidth属性：设置线宽

//添加stroke属性

context.lineWidth=5;

context.strokeStyle="#A52A2A";

6.可有多个canvas画布

var canvas=document.getElementById('mycanvas');//定义变量获取画布DOM
var context=canvas.getContext('2d');//设置绘图环境为2d

var canvas1=document.getElementById('mycanvas1');
var context1=canvas1.getContext('2d');

all

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas0213</title>
    <style type="text/css">
        canvas{background:#A9A9A0}
    </style>
</head>
<body>
    <canvas id="mycanvas" width="500" height="300">
        您的浏览器暂不支持HTML5的canvas元素
    </canvas>
    <canvas id="mycanvas1" width="500" height="300"></canvas>
    <script type="text/javascript">
        var canvas=document.getElementById('mycanvas');//定义变量获取画布DOM
        var context=canvas.getContext('2d');//设置绘图环境为2d

        var canvas1=document.getElementById('mycanvas1');
        var context1=canvas1.getContext('2d');

        //添加stroke属性
        context.lineWidth=5;
        context.strokeStyle="#A52A2A";
        //描点
        context.moveTo(0,0);
        context.lineTo(500,300);
        context.lineTo(0,300);
        context.lineTo(500,0);
        context.lineTo(0,150);
        context.lineTo(500,150);
        context.lineTo(0,0);
        context.lineTo(0,300);
        context.lineTo(500,150);
        context.lineTo(500,300);
        context.lineTo(0,150);

        context.moveTo(0,0);
        context.lineTo(500,0);
        context.lineTo(500,150);

        context.stroke();//绘制方法

        //添加stroke属性
        context1.lineWidth=5;
        context1.strokeStyle="#A52A2A";
        //描点
        context1.moveTo(0,0);
        context1.lineTo(500,300);
        context1.lineTo(0,300);
        context1.lineTo(500,0);
        context1.lineTo(0,150);
        context1.lineTo(500,150);
        context1.lineTo(0,0);
        context1.lineTo(0,300);
        context1.lineTo(500,150);
        context1.lineTo(500,300);
        context1.lineTo(0,150);

        context1.moveTo(0,0);
        context1.lineTo(500,0);
        context1.lineTo(500,150);

        context1.stroke();//绘制方法
    </script>
</body>
</html>

查看全文

相关阅读:
小李子和他的水枪
 尼布尔的祈祷文
 牢骚太盛防肠断，风物长宜放眼量。
常见浏览器userAgent请求头信息
 微信浏览器点击事件不生效怎么解决？
2019上半年软件设计师上午考试真题
 360浏览器断网广告怎么去？
谷歌浏览器打开一个新页面时使用新的标签
 Deep Learning in Bioinformatics
TensorFlow Playground

原文地址：https://www.cnblogs.com/liao13160678112/p/6394453.html