CanvasDay01： 绘图流程 绘制图形 绘制七巧板 实现电子时钟 倒计时

最新推荐文章于 2021-01-08 18:14:48 发布
最新推荐文章于 2021-01-08 18:14:48 发布
阅读量265 收藏
点赞数
分类专栏： # Canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43415644/article/details/106804821
版权

目录

0x01 Canvas的绘图流程

0x01 绘制线段:

0x03 绘制多边形：

0x04 绘制多个图形：

0x05 绘制点：

0x06 绘制弧线：

0x07 绘制圆形：

0x08 Demo：绘制七巧板

0x09 实现电子时钟：

0x0A 总结：

 

0x01 Canvas的绘图流程

  1. 编写canvas标签,注意指定宽高，如果不指定宽高，默认是300px宽，150px高。不建议使用css的方式，例如style 属性来设置canvas标签的宽高，因为css设置的只是canvas显示的大小。不能设置canvas画布分辨率的大小。采用width 和 height属性设置大小，相当于同时将两者设置了出来，是复合W3C的标准的。注意：数字之后是没有单位的。
  2. 获取 canvas DOM对象
  3. 获取 canvas 对象,即绘图的上下文环境
  4. 设置绘图属性
  5. 调用绘图API 例如 stroke fill 这些函数

案例：

准备工作：

  <canvas id="canvas" width='800' height='800'><strong>尊敬的用户，您的浏览器并不支持canvas，请更换浏览器！</strong></canvas>
    <script>
    
        const canvas = document.getElementById("canvas");
        //获取到canvas对象
        const ctx = canvas.getContext('2d');
        //如果标签中没有设置大小，也可以通过js的方式来指定canvas的大小
        //canvas.width = 800;
        //canvas.height = 800;

在canvas标签之间可以写上当用户的浏览器不支持canvas时，你希望用户看到什么。

当用户的浏览器支持canvas时，canvas标签之间的html代码将会完全被浏览器忽略掉。

也可以在js中实现这一点，如果canvas.getContext('2d')为空，那么就说明浏览器不支持canvas

    <script>
        var canvas = document.getElementById("canvas");
        if(canvas.getContext('2d')){
            var context = canvas.getContext('2d');
            //使用context绘图
        }else{
            alert("当前浏览器不支持canvas,请更换浏览器后再试");
        }
    
    </script>

canvas中的绘图是一种基于状态的绘图，即先设置绘图的状态、绘图的属性，然后再调用api进行具体的绘制

0x02 绘制线段:

多个lineTo连用，即可连续绘制线段
这里就可以体现出 canvas是一种基于状态的绘图，而不是一种基于对象的绘图

如果是基于对象的绘图，那么我们就应该创建出一个line对象，然后对line对象进行设置

而canvas对线条的种种设置都是对ctx对象的属性的设置。

        //开始绘制线段
        ctx.beginPath();
        //设置线条的宽度，单位px
        ctx.lineWidth = 1;
        //设置线的颜色，可以使用16进制，但是需要放在一个字符串中
        ctx.strokeStyle = 'blue';
        //线的起点
        ctx.moveTo(100,100);
        //中间点坐标
        ctx.lineTo(250,250);
        //终点坐标
        ctx.lineTo(300,100);
        //绘制线段
        ctx.stroke();

0x03 绘制多边形：

起点坐标 = 终点坐标 ，即可绘制多边形。

ctx.fillStyle = ’rgb(0,0,0)‘ 设置多边形的填充色

ctx.fill() 进行填充

            context.moveTo(512,200);
            context.lineTo(612,300);
            context.lineTo(500,500);
            context.lineTo(512,200);
            //填充颜色
            context.fillStyle = 'rgb(2,100,30)';
            context.fill();
            //绘制边框
            //也可以不调用一下方法，这样多边形就没有边框了
            context.lineWidth = 5;
            context.strokeStyle = '#005588';
            context.stroke();

0x04 绘制多个图形：

因为canvas是基于状态的，所以为了不让给上一个图形设置的状态 影响到 给下一个图形设置的状态，我们可以用

context.beginPath()  重新规划一个路径

context.closePath()  结束当前的路径（在api函数之前调用）

将上个图形的状态设置包裹起来，表明其中的状态只对该图形起作用。

注意：

当我们绘制的路径是一条不封闭的路径时，如果我们调用了closePath()，那么closePath()会自动将我们绘制的路径的首尾用线段连接起来。

所以可以只使用beginPath() 而不使用closePath();

           var context = canvas.getContext('2d');
            //使用context绘图
            context.beginPath();

            context.moveTo(512,200);
            context.lineTo(612,300);
            context.lineTo(500,500);
            context.lineTo(512,200);
           
            context.fillStyle = 'rgb(2,100,30)';
            context.fill();

            context.lineWidth = 5;
            context.strokeStyle = '#005588';
            context.closePath();
            
            context.stroke();

      

            context.beginPath();

            context.moveTo(200,100);
            context.lineTo(700,600);
            context.strokeStyle='black';
            context.closePath();
            context.stroke();

0x05 绘制点：

        //绘制点

        ctx.beginPath();
        ctx.lineWidth = 1;
        //线的颜色
        ctx.strokeStyle = 'blue';
        //线的起点
        ctx.moveTo(500,100);
        //终点坐标
        ctx.lineTo(501,101);
        //绘制线段
        ctx.stroke();

0x06 绘制弧线：

    /**
    * 绘制弧线
    * @ centerx 圆心x坐标
    * @ centery 圆心y坐标
    * @ radius 半径
    * @ startingAngle 起始弧度,0弧度为x轴正半轴的位置
    * @ endingAngle 终点弧度
    * @ false 顺时针绘制 true 逆时针绘制
    */
    context.arc(
        centerx,centery,radius,
        startingAngle,endingAngle,
        anticlockwise = false
    )

因为canvas是以向下为y轴的正半轴，所以90度位于正下方。

绘制弧形：调用closePath() 和不调用closePath() 的区别

效果：

代码：

<script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    for(var i=1;i<10;i++){
        ctx.beginPath();
        ctx.arc(50+100*i,100,30,0,2*Math.PI*i/10);

        ctx.lineWidth= 1;
        ctx.strokeStyle = '#003388';
        ctx.stroke();
    }
    for(var i=1;i<10;i++){
        ctx.beginPath();
        ctx.arc(50+100*i,200,30,0,2*Math.PI*i/10);
        
        ctx.lineWidth= 1;
        ctx.strokeStyle = '#003388';
        ctx.closePath();
        ctx.stroke();
     
    }
</script>

0x07 绘制圆形：

        //绘制圆形
        ctx.beginPath();
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'green';
        ctx.fillStyle = 'red';
        /**
        *@ x轴坐标
        *@ y轴坐标
        *@ 半径
        *@ 起始角度
        *@ 结束角度
        */
        ctx.arc(400,400,50,0,2 * Math.PI);
        // 绘制圆形的边框
        ctx.stroke();
        // 绘制圆形的填充色
        ctx.fill();

0x08 Demo：绘制七巧板

效果：

思路：

先准备好七巧板每一片的各个点的坐标和颜色

然后写一个draw函数，作用是画出一片。

然后只要循环调用draw函数即可

代码：

 <canvas id="canvas" width='1024' height='600'></canvas>
    <script>
        function draw(piece,cxt){
            cxt.beginPath();
            cxt.moveTo(piece.p[0].x,piece.p[0].y);
            for(var i =1;i<piece.p.length;i++){
                cxt.lineTo(piece.p[i].x,piece.p[i].y);
            }
            cxt.fillStyle = piece.color;
            cxt.fill();
            cxt.closePath();
        }
        var tangram =[
            {
                p:[
                    {x:0,y:0},
                    {x:800,y:0},
                    {x:400,y:400}
                ],
                color:'#caff67'
            },
            {
                p:[
                    {x:0,y:0},
                    {x:400,y:400},
                    {x:0,y:800}
                ],
                color:'#67becf'
            },
            {
                p:[
                    {x:800,y:0},
                    {x:800,y:400},
                    {x:600,y:600},
                    {x:600,y:200}
                ],
                color:'#ef3d61'
            },
            {
                p:[
                    {x:600,y:200},
                    {x:600,y:600},
                    {x:400,y:400}
                ],
                color:'#f9f51a'
            },
            {
                p:[
                    {x:400,y:400},
                    {x:600,y:600},
                    {x:400,y:800},
                    {x:200,y:600}
                ],
                color:'#a594c0'
            },
            {
                p:[
                    {x:200,y:600},
                    {x:400,y:800},
                    {x:0,y:800}
                ],
                color:'#fa8ecc'
            },
            {
                p:[
                    {x:800,y:400},
                    {x:800,y:800},
                    {x:400,y:800}
                ],
                color:'#f6ca29'
            }
        ]
        var canvas = document.getElementById("canvas");
        if(canvas.getContext('2d')){
            var context = canvas.getContext('2d');
            for(var i =0;i<tangram.length;i++){
                draw(tangram[i],context);
            }
        }else{
            alert("当前浏览器不支持canvas,请更换浏览器后再试");
        }

    </script>

0x09 实现电子时钟：

效果：

思路：

格子系统

代码：

digit.js

digit =
    [
        [
            [0,0,1,1,1,0,0],
            [0,1,1,0,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,0,1,1,0],
            [0,0,1,1,1,0,0]
        ],//0
        [
            [0,0,0,1,1,0,0],
            [0,1,1,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [1,1,1,1,1,1,1]
        ],//1
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,0,0,0],
            [0,1,1,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,0,0,0,1,1],
            [1,1,1,1,1,1,1]
        ],//2
        [
            [1,1,1,1,1,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,0,0,1,1,0],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//3
        [
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,1,0],
            [0,0,1,1,1,1,0],
            [0,1,1,0,1,1,0],
            [1,1,0,0,1,1,0],
            [1,1,1,1,1,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,1,1]
        ],//4
        [
            [1,1,1,1,1,1,1],
            [1,1,0,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,1,1,1,1,0],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//5
        [
            [0,0,0,0,1,1,0],
            [0,0,1,1,0,0,0],
            [0,1,1,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,0,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//6
        [
            [1,1,1,1,1,1,1],
            [1,1,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0]
        ],//7
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//8
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,1,1,0,0,0,0]
        ],//9
        [
            [0,0,0,0],
            [0,0,0,0],
            [0,1,1,0],
            [0,1,1,0],
            [0,0,0,0],
            [0,0,0,0],
            [0,1,1,0],
            [0,1,1,0],
            [0,0,0,0],
            [0,0,0,0]
        ]//:
    ];

时钟.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/digit.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        /* #canvas{
            border:1px solid black;
            position:absolute;
            left:50%;
            top:50%;
            transform: translate(-50%,-50%);
        } */
        html,body{
            height:100%;
        }
    </style>
</head>
<body>
        <canvas id='canvas' style='height:100%' ></canvas>

   
</body>
<script>
var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
//小球半径
var RADIUS = 8;
//每个数字距离画布上边距的距离
var MARGIN_TOP = 60;
//第一个数字距离画布左边距的距离
var MARGIN_LEFT = 30;
//倒计时
//js中月份比较特别，0表示1月，所以6月就是5
// const endTime = new Date(2020,5,18,12,0,0);
//1小时学习计时器
//当前时间
var endTime = new Date();
//当前时间之后的一个小时
//setTime接收的参数为时间戳,getTime获取当前时间的时间戳
endTime.setTime(endTime.getTime() + 3600000)
var curShowTimeSeconds = 0;

var balls = [];
const colors = [
    '#33B5E5','#0099CC','#AA66CC','#9933CC','#99CC00',
    '#669900','#FFBB33','#FF8800','#FF4444','#C000C'
]

//返回当前应该显示时间,即倒计时时间,单位为秒
function getCurrentShowTimeSeconds(){
    var curTime = new Date();
    var ret = curTime.getHours() * 3600 + curTime.getMinutes() *60 +curTime.getSeconds();
    // 保证倒计时结束时屏幕显示为0
    return ret >= 0? ret:0;
}
//负责数据的改变
function update(){
    var nextShowTimeSeconds = getCurrentShowTimeSeconds();
    var next_hours = parseInt(nextShowTimeSeconds/3600);
    var next_minutes = parseInt((nextShowTimeSeconds - next_hours*3600)/60);
    var next_seconds = parseInt(nextShowTimeSeconds % 60); 
    var cur_hours = parseInt(curShowTimeSeconds/3600);
    var cur_minutes = parseInt((curShowTimeSeconds - cur_hours*3600)/60);
    var cur_seconds = parseInt(curShowTimeSeconds % 60);
    if(next_seconds != cur_seconds){
        //如果小时的十位数发生了改变，就在十位数所在的位置添加小球
        if(parseInt(cur_hours/10)!=parseInt(next_hours/10)){
            addBalls(MARGIN_LEFT+0,MARGIN_TOP,parseInt(cur_hours/10));
        }
        //如果小时的个位数发生了变化,就在个位数所在的位置添加小球
        if(parseInt(cur_hours%10)!=parseInt(next_hours%10)){
            addBalls(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(cur_hours%10));
        }
        //对分钟
        if(parseInt(cur_minutes/10)!=parseInt(next_minutes/10)){
            addBalls(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(cur_minutes/10));
        }
        if(parseInt(cur_minutes%10)!=parseInt(next_minutes%10)){
            addBalls(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(cur_minutes%10));
        }
        //对秒钟
        if(parseInt(cur_seconds/10)!=parseInt(next_seconds/10)){
            addBalls(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(cur_seconds/10));
        }
        if(parseInt(cur_seconds%10)!=parseInt(next_seconds%10)){
            addBalls(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(cur_seconds%10));
        }
        curShowTimeSeconds = nextShowTimeSeconds;
    }
    //对已经存在彩色小球进行更新
    updateBalls();
}
//更新小球数组中 小球信息
function updateBalls(){
    for(var i=0;i<balls.length;i++){
        balls[i].centerX += balls[i].vx;
        balls[i].centerY += balls[i].vy;
        balls[i].vy += balls[i].g;
            //地板的碰撞检测
        if(balls[i].centerY >= WINDOW_HEIGHT-RADIUS){
            balls[i].centerY = WINDOW_HEIGHT - RADIUS;
            balls[i].vy = - balls[i].vy * 0.75;
        }
    }
    //记录画布中的小球的数量
    var cnt =0;
    for(var i=0;i<balls.length;i++){
        if(balls[i].centerX + RADIUS >0 && balls[i].centerX + RADIUS <WINDOW_WIDTH){
            balls[cnt++] = balls[i];
        }
    }
    
    //将画布外的小球从balls中删除
    while(balls.length > Math.min(300,cnt)){
        balls.pop();
    }

}
//添加彩色的小球
function addBalls(x,y,num){
    for(var i =0;i<digit[num].length;i++){
        for(var j=0;j<digit[num][j].length;j++){
            if(1 == digit[num][i][j]){
                var aBall ={
                    centerX:x + j*2*(RADIUS+1)+(RADIUS+1),
                    centerY:y + i*2*(RADIUS+1)+(RADIUS+1),
                    g:1.5+Math.random(),//1.5+ 0到1之间的一个随机数
                    vx:Math.pow(-1,Math.ceil(Math.random()*1000))*4,//-1的多少次方 * 4  多少次方呢 在0到1000之前取一个随机数然后取整，最终结果为正负四
                    vy:-5,
                    color:colors[Math.floor(Math.random()*colors.length)] //随机索引 0-9 来 获取随机颜色
                }
                balls.push(aBall)
                
            }
        }
    } 
}
/*
绘制数字
x 数字盒子 左上角 的x坐标
y 数字盒子 左上角 的y坐标
num 绘制什么数字
ctx canvas对象
*/
function renderDigit(x,y,num,ctx){
    ctx.fillStyle = 'rgb(0,102,153)';
    for(var i =0;i<digit[num].length;i++){
        for(var j=0;j<digit[num][j].length;j++){
            if(1 == digit[num][i][j]){
                //绘制小球
                ctx.beginPath();
                //算出小球球心的位置
                var centerX = x + j*2*(RADIUS+1)+(RADIUS+1);
                var centerY = y + i*2*(RADIUS+1)+(RADIUS+1);
                ctx.arc(centerX,centerY,RADIUS,0,2*Math.PI);
                ctx.closePath();
                ctx.fill();
            }
        }
    }
}

//绘制函数（绘制数字，绘制彩色小球）
function render(ctx){
    // 防止之前的图像 和 新的图像叠加在一起
    //对一个矩形空间的图像进行刷新
    ctx.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);
    var date = new Date();
    var hours = parseInt(curShowTimeSeconds/3600);
    var minutes = parseInt((curShowTimeSeconds - hours*3600)/60);
    var seconds = parseInt(curShowTimeSeconds % 60);
    //绘制小时
    renderDigit(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10),ctx);
    renderDigit(MARGIN_LEFT + 15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10),ctx);
    //绘制冒号
    renderDigit(MARGIN_LEFT + 30*(RADIUS+1),MARGIN_TOP,10,ctx);
    //绘制分钟
    renderDigit(MARGIN_LEFT + 39*(RADIUS+1),MARGIN_TOP,parseInt(minutes/10),ctx);
    renderDigit(MARGIN_LEFT + 54*(RADIUS+1),MARGIN_TOP,parseInt(minutes%10),ctx);
    //绘制冒号
    renderDigit(MARGIN_LEFT + 69*(RADIUS+1),MARGIN_TOP,10,ctx);
    //绘制秒钟
    renderDigit(MARGIN_LEFT + 78*(RADIUS+1),MARGIN_TOP,parseInt(seconds/10),ctx);
    renderDigit(MARGIN_LEFT + 93*(RADIUS+1),MARGIN_TOP,parseInt(seconds%10),ctx);

    //遍历小球数组，绘制每个小球
    for(var i =0;i<balls.length;i++){
        ctx.fillStyle = balls[i].color;

        ctx.beginPath();
        ctx.arc(balls[i].centerX,balls[i].centerY,RADIUS,0,2*Math.PI,true);
        ctx.closePath();

        ctx.fill();
    }
}

window.onload = function(){

    //必须先设置body的高度为100%，才能获得正确的高度
    WINDOW_WIDTH =document.body.clientWidth;
    WINDOW_HEIGHT =document.body.clientHeight;
    // console.log(document.body.clientHeight);
    MARGIN_LEFT = Math.round(WINDOW_WIDTH / 10);
    MARGIN_TOP = Math.round(WINDOW_HEIGHT /5);
    //因为最后一个数字距离左边距的位置是93倍的（RADIUS+1）一个数字占据的空间是15个(RADIUS+1)
    RADIUS = Math.round(WINDOW_WIDTH * 8/10 /108 )-1

    var canvas = document.getElementById('canvas');
    canvas.width = WINDOW_WIDTH;
    canvas.height = WINDOW_HEIGHT;
    ctx = canvas.getContext('2d');
    curShowTimeSeconds = getCurrentShowTimeSeconds();
    /**
     * 每帧要执行的函数
     * 每帧多少毫秒，帧率 =  1s / 每帧的时间
    */
    setInterval(
        function(){
            render(ctx);
            update();
        },20
    )
 
}
</script>
</html>

0x0A 总结：

context.clearRect(x,y,width,height) 清除一个矩形区域的内容

context.canvas 得到context上下文属于的画布

context.canvas.wdith  获取画布的大小

context.canvas.height

'"<>{{7*7}}
关注
专栏目录
electron-paint:这是在electron.js中制作的一个简单的绘画程序
05-09
电子漆 这是在electron.js中制作的一个简单的绘画程序
【QT】实例五---绘图，计时器多线程，键盘响应，多窗口调用(暂未实现，待补)，列表框和表格框
share something here
04-25 366
实例五---绘图，计时器多线程，键盘响应加法动画（QWidget） 加法 直接在QT内开发 QString q1,q2,q3; q1=ui->lineEdit_1->text(); q2=ui->lineEdit_2->text(); int n=q1.toInt()+q2.toInt(); q3=q3.sprintf("%d",n); ui->lineEidt_3->settext(q3); 动画（QWidget） 随机产生5个点在屏幕上。 头文件： #inc
HTML5之Canvas绘图(二) ——应用篇之七巧板
weixin_30741653的博客
04-22 212
1.canvas绘制七巧板-- <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>七巧板</title> </head> <body> <canvas id="c1" style="bor...
Nodejs.Electron（Nodejs的图形界面开发）安装和试用
weixin_30826095的博客
01-12 1892
# 克隆示例项目的仓库 git clone https://github.com/electron/electron-quick-start # 进入这个仓库 cd electron-quick-start # 安装依赖 npm install 如果上面这步失败, 应该是安装源在国外, 需要跨墙 建议换成淘宝源: ELECTRON_MIRR...
html5 canvas绘制七巧板图形代码
11-06
在HTML5 Canvas上绘制七巧板图形，可以结合数学、编程和设计，为网页增加互动性和趣味性。 首先，我们需要理解Canvas的基本结构。HTML5 Canvas是一个二维绘图表面，通过JavaScript API来控制其内容。在HTML中，我们...
canvas绘制七巧板
10-18
通过定义画布的基本属性，使用Canvas的2D渲染上下文，以及定义好七巧板的形状和颜色后，通过循环调用绘图函数，实现了七巧板图形的绘制。这不仅是一个视觉上的展示，也是对Canvas绘图能力的一次实践。希望读者在阅读...
Python如何使用turtle库绘制图形
09-17
Python中的turtle库是一个非常有趣的模块，它为初学者提供了一个简单易用的图形绘制环境。turtle库基于turtle图形界面，最初是为LOGO编程语言的一部分，现在已经成为Python的标准库之一。下面将详细介绍如何使用...
HTML5 canvas绘制七巧板图形代码
05-01
这个"HTML5 canvas绘制七巧板图形代码"实例，是初学者掌握canvas API的一个好练习，通过它我们可以深入理解HTML5的绘图功能。 首先，canvas是一个二维绘图表面，我们可以通过JavaScript来控制它的行为。在HTML中，...
Canvas学习记录绘制七巧板(01)
qq_30675311的博客
01-08 369
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; margin: 0; } #canvas { border: 1p
H5初识，应用canvas实现一个简单的七巧板图形
qq_43339643的博客
05-14 543
简单的记录一下学习过程 应用html5的canvas绘制了一个十分简单的七巧板图形，没有什么难度，只要将各个点的坐标预先计算好 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/ja...
山东建筑大学在辽宁2020-2024各专业最低录取分数及位次表.pdf
10-05
那些年，与你同分同位次的同学都去了哪里？全国各大学在辽宁2020-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
MATLAB中实现基于遗传算法（GA）优化的门控循环单元（GRU）进行数据多输入单输出回归预测（包含详细的完整的程序和数据）
10-05
内容概要在本文档中详细介绍了在MATLAB环境中运用遗传算法（GA）对门控循环单元（GRU）网络模型进行优化，并实现多输入单一输出的数据回归预测的技术过程，涵盖数据生成、模型建立与配置、遗传算法优化以及最终的训练和效果测试。 适合人群本总结适用于从事深度学习特别是涉及序列数据研究的专业人士，如机器学习工程师、科研工作者或希望深化自己神经网络建模技能的学习者。 使用场景及目标包括但不限于：解决实际应用中遇到的时间序列预测问题、提升对于RNN家族中高级组件的理解水平以及掌握复杂任务下模型调参的具体手法，尤其着重于增强回归问题的精度表现。 附加说明随文提供的范例代码全面细致，使得初学者能顺利跟随教程建立起自身项目，在实践中探索遗传搜索法的优势所在。
基于Vue框架的毕业生离校管理系统设计源码
10-05
本项目为基于Vue框架开发的毕业生离校管理系统设计源码，包含322个文件，涵盖147个Vue组件、95个JavaScript脚本、46个SVG图形、9个SCSS样式表、3个Handlebars模板、2个YAML配置、2个Markdown文件、2个JSON数据、2个PNG图片和2个CSS样式文件。系统采用Vue、JavaScript、CSS和HTML等多种编程语言和技术构建，旨在实现毕业生的离校管理功能。
基于Python语言的实训内容设计源码
10-05
本项目是一款以Python为主开发语言的实训内容设计源码，共包含33个文件，涵盖21个Python源代码文件、5个编译后文件、3个图片文件、3个文本文件、1个JSON文件。这些文件共同构成了一个结构完整的实训项目，旨在为学生提供实际操作的学习平台。
大模型利用多样性精选大语言模型预训练中重要数据的选择算法
10-05
在大规模可用训练语料库中，数据选择对于大型语言模型（LLM）的预训练至关重要。研究人员正在探索使用数据影响力来衡量数据实例的重要性，即高影响力分数表明将该实例纳入训练集可能会提高模型性能。然而，这种方法存在几个限制：(1) 计算所有可用数据的影响力耗时；(2) 选择的数据实例不够多样化，可能会阻碍预训练模型有效泛化到各种下游任务。本文介绍了Quad方法，这是一种同时考虑质量和多样性的数据选择方法，通过使用数据影响力实现最先进的预训练结果。
基于Python和HTML的智慧养老系统计算机视觉代码设计源码
10-05
该项目是一款基于Python和HTML开发的智慧养老系统计算机视觉代码设计源码，包含95个文件，其中包括64个Python源代码文件、9个XML配置文件、5个Git忽略文件、4个HTML页面文件以及其他类型的文件，如hdf5、iml、md等。该系统专注于利用计算机视觉技术提升养老服务，适用于智慧养老领域的应用开发。
输送粉末涂层炉_三维3D设计图纸.zip
10-05
输送粉末涂层炉_三维3D设计图纸.zip
self python script
最新发布
10-05
self python script
c语言图形库实现七巧板
05-17
实现七巧板可以用到c语言图形库中的绘图函数和鼠标事件函数。 首先，我们需要在图形界面中绘制出七巧板的背景图案。可以使用图形库中的 `line` 和 `rectangle` 函数来绘制出各种形状的图案。然后，我们需要实现鼠标...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值