代码块

最新推荐文章于 2025-08-15 22:56:20 发布

转载最新推荐文章于 2025-08-15 22:56:20 发布 · 64 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c960e735188252d64582e34

文章标签：

#javascript #嵌入式 #ViewUI

JavaScript （阮一峰） ES6 链接（阮一峰）

1. 机器人机器人的制作

<!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>机器人</title>    
<style>        
    canvas{            
        border: 1px solid red;            
        background-color:skyblue;        
    }    
</style>
</head>
<body>    
    <canvas width="500" height="500" id="mycanvas"></canvas>    
<script>        
    var mycanvas=document.getElementById('mycanvas');//获取画布        
    var cxt=mycanvas.getContext('2d');//上下文渲染        
    cxt.beginPath();//开始路径        
    cxt.strokeStyle="white";        
    cxt.fillStyle="pink";        
    cxt.strokeRect(150,150,140,90);        
    cxt.fillRect(150,150,140,90);        
    cxt.stroke()//开始绘制        
    cxt.closePath();//关闭路径        
    cxt.beginPath();        
    cxt.strokeStyle="white";        
    cxt.fillStyle="grey";        
    cxt.strokeRect(130,170,20,40);        
    cxt.fillRect(130,170,20,40);        
    cxt.stroke();        
    cxt.closePath();        
    cxt.beginPath();        
    cxt.strokeStyle="white";        
    cxt.fillStyle="grey";        
    cxt.strokeRect(290,170,20,40);        
    cxt.fillRect(290,170,20,40);        
    cxt.stroke();        
    cxt.closePath();       
    cxt.beginPath();        
    cxt.strokeStyle="white";        
    cxt.fillStyle="red";        
    cxt.strokeRect(200,210,40,15);        
    cxt.fillRect(200,210,40,15);        
    cxt.stroke();        
    cxt.closePath();        
    cxt.beginPath();        
    cxt.arc(180,180,8,0,2*Math.PI,true);        
    cxt.strokeStyle="white";        
    cxt.fillStyle="blue";//填充的颜色        
    cxt.fill()        
    cxt.stroke();        
    cxt.closePath();        
    cxt.beginPath();        
    cxt.arc(260,180,8,0,2*Math.PI,true);        
    cxt.strokeStyle="white";        
    cxt.fillStyle="blue";//填充的颜色        
    cxt.fill()        
    cxt.stroke();        
    cxt.closePath();        
    cxt.beginPath();        
    cxt.strokeStyle="white";        
    cxt.fillStyle="grey"        
    cxt.strokeRect(175,240,90,140);        
    cxt.fillRect(175,240,90,140);        
    cxt.fill()        
    cxt.stroke();        
    cxt.closePath();        
    cxt.beginPath();        
    cxt.strokeStyle="white";        
    cxt.fillStyle="grey";        
    cxt.strokeRect(55,280,120,15);        
    cxt.fillRect(55,280,120,15);        
    cxt.stroke();        
    cxt.closePath();        
    cxt.beginPath();        
    cxt.strokeStyle="white";        
    cxt.fillStyle="grey";        
    cxt.strokeRect(265,280,120,15);        
    cxt.fillRect(265,280,120,15);        
    cxt.stroke();        
    cxt.closePath();        
    cxt.beginPath();        
    cxt.strokeStyle="white";        
    cxt.fillStyle="grey";        
    cxt.strokeRect(190,380,15,140);        
    cxt.fillRect(190,380,15,140);        
    cxt.stroke();        
    cxt.closePath();        
    cxt.beginPath();        
    cxt.strokeStyle="white";        
    cxt.fillStyle="grey";        
    cxt.strokeRect(235,380,15,140);        
    cxt.fillRect(235,380,15,140);        
    cxt.stroke();        
    cxt.closePath();        
    cxt.beginPath();        
    cxt.lineWidth=10;        
    cxt.strokeStyle="yellow"        
    cxt.moveTo(190,150);        
    cxt.lineTo(150,50);        
    cxt.stroke();        
    cxt.closePath()        
    cxt.beginPath();        
    cxt.moveTo(250,150);        
    cxt.lineTo(290,50);        
    cxt.stroke();        
    cxt.closePath()    
</script>
</body>
</html>复制代码

2. 太极拳的制作

<!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>太极</title>    
<style>        
html{            
perspective: 1000px;        
}        
canvas{            
display: block;            
/* border: 1px solid red; */            
/* background-color: skyblue; */           
margin: 0 auto;            
transition: transform 1s linear;        
}    </style></head><body>    
<canvas width="500" height="500" id="mycanvas"></canvas>    
<script>        
window.onload=function(){            
var mycanvas=document.getElementById('mycanvas');            
var cxt=mycanvas.getContext('2d');            
cxt.beginPath();            
cxt.fillStyle="gray"            
cxt.arc(250,250,150,0,Math.PI,false);            
cxt.stroke();            
cxt.fill();            
cxt.beginPath();            
cxt.fillStyle="black"            
cxt.arc(250,250,150,0,Math.PI,true);            
cxt.stroke();            
cxt.fill();            
cxt.beginPath();            
cxt.fillStyle="gray"           
 cxt.arc(175,250,75,0,Math.PI,true);            
cxt.stroke();            
cxt.fill();            
cxt.beginPath();            
cxt.fillStyle="black";            
cxt.arc(175,255,25,0,2*Math.PI,true);            
cxt.stroke();            
cxt.fill();            
cxt.beginPath();           
cxt.fillStyle="black"            
cxt.arc(325,250,75,0,2*Math.PI,false);            
cxt.stroke();            
cxt.fill();            
cxt.beginPath();            
cxt.fillStyle="gray"            
cxt.arc(325,245,25,0,2*Math.PI,false);            
cxt.stroke();            
cxt.fill();            
var index=0;            
mycanvas.onmouseover=function(){                
t=setInterval(function(){                    
index++;                    
mycanvas.style.transform="rotate("+index*15+"deg)";                
},50)              
}        
}    
</script>
</body>
</html>复制代码

3. 画图板的制作

<style>       
canvas{            
display: block;            
border: 1px solid red;            
background-color: aqua;        
}        
span{            
display: inline-block;            
width: 30px;            
height: 30px;        
}        
#red{           
 background-color: red;        
}        
#orange{            
background-color: orange;        
}        
#yellow{            
background-color: yellow;        
}        
#green{            
background-color: green;        
}        
#blue{            
background-color: blue;        
}        
#black{            
background-color: black;        
}        
#purple{            
background-color: purple;        
}    
</style></head><body>    
<span id="red"></span>    
<span id="orange"></span>    
<span id="yellow"></span>    
<span id="green"></span>    
<span id="blue"></span>    
<span id="black"></span>    
<span id="purple"></span>    
<button>清空画布</button>    
<canvas width="500" height="500" id="mycanvas"></canvas>    
<script>        
window.onload=function(){            
console.log(event)            
var mycanvas=document.getElementById('mycanvas');            
var cxt=mycanvas.getContext('2d');        
//javascript的style属性只能获取内联样式，对于外部样式和嵌入式样式需要用currentStyle属性。        
//但是，currentStyle在FIrefox和Chrome下不支持，需要使用如下兼容性代码             
HTMLElement.prototype.__defineGetter__("currentStyle", function () {                     
return this.ownerDocument.defaultView.getComputedStyle(this, null);                 
});            
var sps=document.getElementsByTagName('span');            
for(var n=0;n<sps.length;n++){                
sps[n].onclick=function(){                    
cxt.strokeStyle=this.currentStyle.backgroundColor;                    
// cxt.strokeStyle=this.style.backgroundColor                    
//style属性只能操作内联样式;               
 }            
}            
mycanvas.onmousedown=function(event){                
var e=event || window.event;                
var x=e.clientX-mycanvas.offsetLeft;                
var y=e.clientY-mycanvas.offsetTop;                
cxt.beginPath();                
mycanvas.onmousemove=function(event){                    
var e=event || window.event;                    
var X=e.clientX-mycanvas.offsetLeft;                    
var Y=e.clientY-mycanvas.offsetTop;                    
cxt.lineTo(X,Y)                    
cxt.stroke()                
}                
mycanvas.onmouseup=function(){                    
mycanvas.onmousemove=null;                    
cxt.closePath();                
}            
}            
//清空画布            
var bt1=document.getElementsByTagName('button')[0];            
bt1.onclick=function(){                
cxt.clearRect(0,0,mycanvas.width,mycanvas.height)            
}        
}    
</script></body>复制代码

4. Vue 组件化购物车

<!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>购物车</title>    <script src="js/vue221.js"></script>    
<style>        
    .active{            
        color: red;        
    }    
</style>
</head>
<body>    
    <div id="app">        
        <hd v-for="(item,index) in arr" :key="index" :content="item" :x="index" @handle1="remove" @handle2="add" @handle3="reduce"></hd>        
        <div>            
            <span>一共买了多少商品：{{sums}}</span>            
            <span :class="color">总价：{{totals}}</span>        
        </div>    
    </div>    
    <script>        
        Vue.component("hd",{            
            props:["content","x"],            
            template:"<div><span>名称：{{content.name}}</span><button @click='reduce()'>-</button>{{content.num}}<button @click='add()'>+</button><span>单价：{{content.price}}</span><span>小计：{{content.sum}}</span><button @click='remove()'>删除</button></div>",
            methods:{               
                remove:function(){                    
                    this.$emit("handle1",this.x)               
                },               
                add:function(){                   
                    this.$emit("handle2",this.x)               
                },               
                reduce:function(){                   
                    this.$emit("handle3",this.x)               
                }                
            }        
    })        
    let vm=new Vue({            
        el:"#app",            
        data:{                
            arr:[{name:"鞋子",num:4,price:20,sum:80},                
            {name:"衣服",num:1,price:50,sum:50},                
            {name:"裤子",num:1,price:150,sum:150}],                
            color:""            
        },            
        methods:{                
            remove:function(index){                    
                this.arr.splice(index,1)                
            },                
            add:function(index){                    
                this.arr[index].num++;                    
                this.arr[index].sum=this.arr[index].num*this.arr[index].price;                
            },                
            reduce:function(index){                    
                this.arr[index].num>0 ? this.arr[index].num-- : this.arr[index].num;                    
                this.arr[index].sum=this.arr[index].num*this.arr[index].price;                
            }            
        },            
        computed:{                
            sums:function(){                    
                var sum=0;                    
                for(var n=0;n<this.arr.length;n++){                        
                    sum=sum+this.arr[n].num;                    
                }                    
                return sum;                
            },                
            totals:function(){                    
            var total=0;                    
                for(var n=0;n<this.arr.length;n++){                        
                    total=total+this.arr[n].sum;                    
                }                    
                total>600 ? this.color="active" : total;                    
                return total;                
            }            
        }        
    })    
</script>
</body>
</html>复制代码