CSS基础12-canvas_canvas css

最新推荐文章于 2024-05-18 03:07:39 发布

2401_84181070

最新推荐文章于 2024-05-18 03:07:39 发布

阅读量725

点赞数 14

文章标签： css 前端

本文链接：https://blog.csdn.net/2401_84181070/article/details/138234640

版权

进行上色ctx.stroke()
关闭路径ctx.closePath()
设置绘线的粗细ctx.lineWidth，默认值为1.0
设置线段端点显示的样子，butt，round 和 square

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
 canvas{
 margin: 0 auto;
 border: 1px solid #000;
 display: block;
 }
 </style>
</head>
<body>
    <canvas width="500" height="500"></canvas>
    <script>
 const canvas = document.querySelector('canvas');
 const ctx = canvas.getContext('2d');
 // 画虚线
 for (let i = 0; i < 20; i++) {
 drawLine(100+10\*i,100,105+10\*i,100,'green',2)
 }
 
 function drawLine(x1,y1,x2,y2,color,width){
 ctx.beginPath();
 ctx.moveTo(x1,y1);
 ctx.lineTo(x2,y2);
 ctx.strokeStyle=color;
 ctx.lineWidth=width;
 ctx.stroke();
 ctx.closePath();
 }
 </script>
</body>
</html>

画矩形

rect(x,y,width,height)
- x,y矩形坐标
- width,height宽高
strokeRect(x,y,width,height)
- 描边矩形
fillRect(x,y,width,height)
- 填空矩形
- 会自动闭合路径
clearRect(x,y,width,height)
- 清除矩形
- 清空画布，类似与橡皮檫

画圆

arc(x,y,radius,startAngle,endAngle,counterclockwise)
- x,y描述圆心坐标
- radius圆形半径
- startAngle,endAngle起始角度和结束角度
- counterclockwise顺时针和逆时针

绘制文字

fillText()绘制无填充文字
strokeText()绘制有填充文字
measureText()返回文本宽度对象
font='red’CSS样式
textBaseline='bottom’设置底线对齐绘制基线
textAlign='left’设置文字对齐方式

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
 canvas{
 margin: 0 auto;
 border: 1px solid #000;
 display: block;
 }
 </style>
</head>
<body>
    <canvas width="600" height="600"></canvas>
    <script>
 // 绘制饼状图并显示比例
 const canvas = document.querySelector('canvas');
 const ctx = canvas.getContext('2d');

 const data = [{
 value:'苹果',
 color:'red',
 num:0.1,
 },{
 value: '香蕉',
 color:'yellow',
 num:0.3,
 },{
 value: '梨子',
 color: 'green',
 num:0.4,
 },{
 value: '橘子',
 color: 'orange',
 num:0.2
 }]
 let temAngle=-90;
 for (let i = 0; i < data.length; i++) {
 const angle=data[i].num\*360;
 drawArc(300,300,200,angle,data[i].color,data[i].num)
 }
 function drawArc(x1,y1,radius,angle,color,num){
 ctx.beginPath();
 ctx.moveTo(x1,y1);
 ctx.fillStyle=color;
 const startAngle=temAngle\*Math.PI/180;
 const endAngle=(temAngle+angle)\*Math.PI/180;
 ctx.arc(x1,y1,radius,startAngle,endAngle);
 // 绘制文字
 const text=num\*100+'%';
 const textAngle=temAngle+1/2\*angle;
 const x=x1+Math.cos(textAngle\*Math.PI/180)\*(radius+20);
 const y=y1+Math.sin(textAngle\*Math.PI/180)\*radius;
 if(textAngle>90&&textAngle<270){
 ctx.textAlign='end'
 }
 ctx.fillText(text,x,y)
 ctx.fill();
 temAngle+=angle;
 }
 </script>
</body>
</html>

绘制图片

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)
- imgDOM对象||也可以是画布，也就是把一个画布整体的渲染到另外一个画布上
- sx,sy裁剪框左上角X和Y坐标
- swidth,sheight裁剪宽高
- x,y图片坐标
- width,height图片宽高

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
        canvas{
            margin: 0 auto;
            border: 1px solid #000;
            display: block;
        }
    </style>
</head>
<body>
    <canvas width="500" height="500"></canvas>
    <script>
    	// 绘制帧动画
        const canvas = document.querySelector('canvas');
        const ctx = canvas.getContext('2d');

        const img=new Image();
        img.src='./imgs/ying.jpeg';
        img.onload=function (){
            let frameIndex=0;
            let dirIndex=0;
            setInterval(()=>{
                ctx.clearRect(0,0,canvas.width,canvas.height);
                ctx.drawImage(
                    img,
                    frameIndex\*130,
                    dirIndex\*164,
                    130,
                    164,
                    100,
                    100,
                    130\*2,
                    164\*2
                )
                frameIndex++;
                frameIndex%=3;
                console.log(frameIndex)
                if(frameIndex===2){
                    dirIndex++
                }
                dirIndex%=2;
            },1000/4)
        }
    </script>
</body>
</html>

阴影与线性渐变和圆形渐变

阴影

shadowColor ：设置或返回用于阴影的颜色
shadowBlur ：设置或返回用于阴影的模糊级别,大于 1 的正整数，数值越高，模糊程度越大
shadowOffsetX：设置或返回阴影距形状的水平距离
shadowOffsetY：设置或返回阴影距形状的垂直距离

线性渐变

ctx.createLinearGradient(x0,y0,x1,y1);
- x0,y0 起始坐标
- x1,y1 结束坐标

圆形渐变

context.createRadialGradient(x0,y0,r0,x1,y1,r1)
- x0: 渐变的开始圆的 x 坐标
- y0: 渐变的开始圆的 y 坐标
- r0: 开始圆的半径
- x1: 渐变的结束圆的 x 坐标
- y1: 渐变的结束圆的 y 坐标
- r1: 结束圆的半径

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
 canvas{
 margin: 0 auto;
 border: 1px solid #000;
 display: block;
 }
 </style>
</head>
<body>
    <canvas width="500" height="500"></canvas>
    <script>
 const canvas = document.querySelector('canvas');
 const ctx = canvas.getContext('2d');

 ctx.fillStyle='rgba(255,0,0,0.9)';
 ctx.shadowColor='teal';
 ctx.shadowBlur=10;
 ctx.shadowOffsetX=10;
 ctx.shadowOffsetY=10;
 // 创建线性渐变
 const grd=ctx.createLinearGradient(0,0,170,0);
 grd.addColorStop(0,'black'); // 添加渐变颜色
 grd.addColorStop(0.5,'red')
 grd.addColorStop(1,'white');
 ctx.fillStyle=grd;
 ctx.fillRect(0,0,300,300)
 </script>
</body>
</html>

位移画布

移动

ctx.translate(x,y) 方法重新映射画布上的 (0,0) 位置

旋转

context.rotate(angle); 方法旋转当前的绘图

缩放

context.scale(scalewidth,scaleheight)

保存

ctx.save() 保存当前环境的状态
可以把当前绘制环境进行保存到缓存中。

重置

ctx.restore() 返回之前保存过的路径状态和属性

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

.(img-n1twecRJ-1714148060702)]
[外链图片转存中…(img-KERf9Qvo-1714148060702)]
[外链图片转存中…(img-hFkM1cmn-1714148060702)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

2401_84181070

关注

14
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
CSS基础12-canvas_canvas css

ctx.translate(x,y) 方法重新映射画布上的 (0,0) 位置。ctx.restore() 返回之前保存过的路径状态和属性。ctx.save() 保存当前环境的状态。可以把当前绘制环境进行保存到缓存中。
复制链接

扫一扫