javascript中js的canvas画画例子

最新推荐文章于 2024-05-03 10:06:59 发布

taojunhust2

最新推荐文章于 2024-05-03 10:06:59 发布

阅读量303

点赞数 1

文章标签： javascript html5

本文链接：https://blog.csdn.net/weixin_47024922/article/details/120404754

版权

1.首先声明。该代码前面主要时来自该网址：
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors
2.不过最后一个图自己做了一些修改，因为原来代码中也没有写到怎么添加输入数字。自己利用自己前几天学习的input标签。做了一个输入。同时在html的script中加入了值改变函数，同时在调用这个函数。
index_5.html代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>canvas画图案例</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <h1>弹跳彩球</h1>
    <canvas id="canvas"></canvas>
    <canvas id="canvas2"></canvas>
    <canvas id="canvas3"></canvas>
    <canvas id="canvas4"></canvas>
    <canvas id="canvas5"></canvas>
    <canvas id="canvas6"></canvas>
    <canvas id="canvas7"></canvas>
    <canvas id="canvas8"></canvas>
    <input type="range" min="0" max="10" value="1" step="1" id="miterLimit">
    <label for="submit">plese select a number</label>

    

  </body>
  <script src="main_5.js"></script>
  <script>

//也就是说当在js中写好的代码，可以通过在html中的script标签中调用；但是需要调用onchange函数，这样当值改变时就可以产生新的反应；
    document.getElementById('miterLimit').onchange = function() {
               draw8();
               console.log(document.getElementById('miterLimit').value);
               }
  </script>
</html>

```javascript
然后是js代码
main_5.js
function random(min,max) {
  const num = Math.floor(Math.random() * (max - min)) + min;
  return num;
}

function draw(){
	var ctx=document.getElementById('canvas').getContext('2d');//html代码中在<canvas id="canvas"></canvas>
	for (var i=0;i<6;i++){
		for(var j=0;j<6;j++){
			ctx.strokeStyle='rgb(0,'+Math.floor(255-42.5*i)+','+Math.floor(255-42.5*j)+')';
			ctx.beginPath();
			ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
			ctx.stroke();
		}
	}
}
draw();

function draw2(){
	var ctx=document.getElementById('canvas2').getContext('2d');
	for (var i=0;i<6;i++){
		for(var j=0;j<6;j++){
			ctx.fillStyle='rgb('+Math.floor(255-42.5*i)+','+Math.floor(255-42.5*j)+',0)';
			ctx.fillRect(j*25,i*25,25,25);
		}
	}
}
draw2();

function draw3(){
	var ctx=document.getElementById('canvas3').getContext('2d');
	//画背景
	ctx.fillStyle='#FD0';
	ctx.fillRect(0,0,75,75);
	ctx.fillStyle='#6C0';
	ctx.fillRect(75,0,75,75);
	ctx.fillStyle='#09F';
	ctx.fillRect(0,75,75,75);
	ctx.fillStyle='#F30';
	ctx.fillRect(75,75,75,75);
	ctx.fillStyle='#FFF';
	//设置透明度；
	ctx.globalAlpha=0.2;
	//画半透明圆
	for (var i=0;i<7;i++){
		ctx.beginPath();
		ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
		ctx.fill();
	}
}

draw3();

//rgba案例
function draw4(){
	var ctx=document.getElementById('canvas4').getContext('2d');
	//画背景
	ctx.fillStyle='rgb(255,221,0)';
	ctx.fillRect(0,0,150,37.5);
	ctx.fillStyle='rgb(102,204,0)';
	ctx.fillRect(0,37.5,150,37.5);
	ctx.fillStyle='rgb(0,153,255)';
	ctx.fillRect(0,75,150,37.5);
	ctx.fillStyle='rgb(255,51,0)';
	ctx.fillRect(0,112.5,150,37.5);

	//画半透明矩阵
	for(var i=0;i<10;i++){
		ctx.fillStyle='rgba(255,255,255,'+(i+1)/10+')';
		for (var j=0;j<4;j++){
			ctx.fillRect(5+i*14,5+j*37.5,14,27.5);
		}
	}
}

draw4();

//linewidth案例
function draw5(){
	var ctx=document.getElementById('canvas5').getContext('2d');
	for(var i=0;i<6;i++){
		ctx.lineWidth=1+i*2;
		ctx.beginPath();
		ctx.moveTo(5+i*50,5);
		ctx.lineTo(5+i*50,140);
		ctx.stroke();
	}
}
draw5();

//linecap案例
function draw6(){
   var ctx=document.getElementById('canvas6').getContext('2d');
   var lineCap=['butt','round','square'];
   //创建路径
   ctx.strokeStyle='#09f';
   ctx.beginPath();
   ctx.moveTo(10,10);
   ctx.lineTo(140,10);
   ctx.moveTo(10,140);
   ctx.lineTo(140,140);
   ctx.stroke();
   //画线条
   ctx.strokeStyle='black';
   for(var i=0;i<lineCap.length;i++){
   	ctx.lineWidth=15;
   	ctx.lineCap=lineCap[i];
   	ctx.beginPath();
   	ctx.moveTo(25+i*50,10);
   	ctx.lineTo(25+i*50,140);
   	ctx.stroke();
   }
}

draw6();

//lineJoin属性的例子;属性值决定了图形中两线段连接处所显示的样子。
//它又三个值，round,bevel和miter;默认是miter;
function draw7(){
	var ctx=document.getElementById('canvas7').getContext('2d');
	var lineJoin=['round','bevel','miter'];
	ctx.lineWidth=10;
	ctx.lineCap='round';
	for(var i=0;i<lineJoin.length;i++){
		ctx.lineJoin=lineJoin[i];
		ctx.beginPath();
		ctx.moveTo(-5,5+i*40);
		ctx.lineTo(35,45+i*40);
		ctx.lineTo(75,5+i*40);
		ctx.lineTo(115,45+i*40);
		ctx.lineTo(155,5+i*40);
		ctx.stroke();
	}
}

draw7();

//miterLimit案例
function draw8(){
	var ctx=document.getElementById('canvas8').getContext('2d');
	//清空画布
	ctx.clearRect(0,0,150,150);
	//绘制参考线
	ctx.strokeStyle='#09f';
	//ctx.strokeStyle='blue';//这行主要用来测试自己晓得颜色；
	ctx.lineWidth=2;
	ctx.strokeRect(-5,50,160,50);

	//检查输入
    if(document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)){
    	ctx.miterLimit=parseFloat(document.getElementById('miterLimit').value);
    	    //绘制线条
        ctx.beginPath();
        ctx.moveTo(0,100);
        for(i=0;i<24;i++){
    	  var dy=i%2==0?25:-25;
    	 ctx.lineTo(Math.pow(i,1.5)*2,75+dy);
          }
        ctx.stroke();
        return false;
    }else{
    	alert('value must be a positive number');
    }

    

}

//draw8();

最后是css代码。这个是原来下载到的代码，没有做什么修改；
style.css

html, body {
  margin: 0;
}

html {
  font-family: sans-serif;
  height: 100%;
}

body {
  overflow: hidden;
  height: inherit;
}

h1 {
  font-size: 2rem;
  letter-spacing: -1px;
  position: absolute;
  margin: 0;
  top: -4px;
  right: 5px;

  color: transparent;
  text-shadow: 0 0 4px white;
}

最后给一下自己的结果：
点击数字前当选择值变化后产生新的曲线

taojunhust2

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript中js的canvas画画例子

1.首先声明。该代码前面主要时来自该网址：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors2.不过最后一个图自己做了一些修改，因为原来代码中也没有写到怎么添加输入数字。自己利用自己前几天学习的input标签。做了一个输入。同时在html的script中加入了值改变函数，同时在调用这个函数。index_5.html代码<!DOCTYPE html>
复制链接

扫一扫