Html——canvas学习

最新推荐文章于 2024-02-02 15:59:55 发布

FQueen_80

最新推荐文章于 2024-02-02 15:59:55 发布

阅读量275

点赞数

分类专栏：前端-canvas

本文链接：https://blog.csdn.net/qq_37599725/article/details/77871262

版权

前端-canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Html——canvas学习

Html5中功能最强大的元素，不但可以从来处理图形

首先要添加canvas标签

Canvas标签的属性：

三个属性：

1、id:为了后面JavaScript对它进行控制，id属性是必不可少的。

2、Width：宽度

3、Height：高度

相当于定义了一块画布

<style>
#mycanvas{background-color:red}
</style>
</head>
<body>
<canvasid="mycanvas"width="500px"height="200px"></canvas>

Canvas的坐标

可以在canvas中添加友好提示语句，让不支持canvas的浏览器提示

<canvasid="mycanvas"width="500px"height="200px">
您的浏览器不支持canvas

</canvas>

用JavaScript获取画布，设置绘图环境

用canvas画直线

设置起点：moveTo（x坐标，y坐标）

设置终点：lineTo（x坐标，y坐标）

开始绘制：stroke（）;

<canvasid="mycanvas"width="500px"height="200px">
    您的浏览器不支持canvas
    
</canvas>
<script>
   varcanvas=document.getElementById('mycanvas');//定义变量获取画布
   varcontext=canvas.getContext('2d');//设置绘制环境为2d
   context.moveTo(0,0);
   context.lineTo(200,200);
   context.stroke();//绘制方法
</script>

设置直线的颜色或者宽度

用到的是stroke（）方法的属性而不是canvas的属性

1、strokeStyle属性：设置颜色，渐变或者模式

2、lineWidth:设置线的宽度；

context.lineWidth=5;
context.strokeStyle="green";

画一个圆的方法

context.fillStyle="red";//填充颜色为鲜红色；
context.beginPath();
context.arc(x,y,15,0,Math.PI*2,true);//参数分别是：坐标，半径，起始角度，结束角度，顺时针；
context.closePath();
context.fill();

FQueen_80

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html——canvas学习

Html——canvas学习Html5中功能最强大的元素，不但可以从来处理图形首先要添加canvas标签Canvas标签的属性：三个属性：1、id:为了后面JavaScript对它进行控制，id属性是必不可少的。2、Width：宽度3、Height：高度相当于定义了一块画布style> #mycanvas{background-color:
复制链接

扫一扫