昆仑山:眼中无形心中有穴之穴人合一

夫君子之行，静以修身，俭以养德；非澹泊无以明志，非宁静无以致远。夫学须静也，才须学也；非学无以广才，非志无以成学。怠慢则不能励精，险躁则不能冶性。年与时驰，意与岁去，遂成枯落，多不接世。悲守穷庐，将复何及！

 

canvas 技术

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome to Canvas world</title>
    <style>
        canvas{
            border: 2px solid red;
            background: yellow;
          /*  height: 240px;
            width: 320px;*/
        }
        .body{
            margin: 0px;
        }
    </style>
</head>
<body>
<!--
1.creating and resizing your canvas
2.drawing elements
3.animating elements
4.interacting with elements
-->
    <canvas></canvas>
    <script src="resources/canvas.js"></script>
</body>
</html>

js

let canvas=document.querySelector('canvas')
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;

let context=canvas.getContext('2d');
// context.fillRect(x,y,width,height)
context.fillRect(100,100,320,240)
context.fillRect(500,100,320,240)
context.fillRect(500,500,320,240)
console.log(canvas)

直线和圆圈

let canvas = document.querySelector('canvas')
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let context = canvas.getContext('2d');
context.fillStyle = 'rgba(255,0,0,0.5)'

// context.fillRect(x,y,width,height)
context.fillRect(100, 100, 32, 150)
context.fillStyle = 'rgba(0,0,255,0.5)'
context.fillRect(400, 100, 32, 150)
context.fillStyle = 'rgba(0,255,0,0.5)'
context.fillRect(300, 300, 32, 150)

//直线
context.beginPath();
// context.moveTo(x,y)
context.moveTo(50, 300)
// context.lineTo(x,y)
context.lineTo(300, 480)
context.lineTo(520, 300)
context.strokeStyle = "#CC00FF"
context.stroke()
console.log(canvas)


//弧 和圆
// context.beginPath()
// context.arc(600, 300, 30, 0,
//     Math.PI * 2, false)
// context.strokeStyle = 'blue'
// context.stroke()

for (let i=0;i<10;i++) {
    let  x=Math.random()*window.innerWidth;

    let  y=Math.random()*window.innerHeight;
    context.beginPath()
    context.arc(x, y, 30, 0,
        Math.PI * 2, false)
    context.strokeStyle = 'blue'
    context.stroke()
}

posted on 2019-04-07 14:56  Indian_Mysore  阅读(246)  评论(0)  编辑  收藏  举报

导航