canvas基础 - wpsshop博客

代码片段如下：


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>canvas基础</title>
    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
    <link href="css/monokai_sublime.min.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
    <link href="codemirror/lib/codemirror.css" rel="stylesheet" type="text/css">
    <link href="codemirror/theme/monokai.css" rel="stylesheet" type="text/css">
    <link href="codemirror/addon/display/fullscreen.css" rel="stylesheet" type="text/css">
</head>
 
<body class="example">
    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
        Your browser does not support the canvas element.
    </canvas>
    <textarea id="joldy">
        <script type="text/javascript" class="joldy">
        var c = document.getElementById("myCanvas");
        var cxt = c.getContext("2d");
        cxt.moveTo(10, 10);
        cxt.lineTo(150, 50);
        cxt.lineTo(10, 50);
        cxt.stroke();
        </script>
    </textarea>
    <script type="text/javascript" class="joldy">
	    var c = document.getElementById("myCanvas");
	    var cxt = c.getContext("2d");
	    cxt.moveTo(10, 10);
	    cxt.lineTo(150, 50);
	    cxt.lineTo(10, 50);
	    cxt.stroke();
    </script>
    <!-- 2 -->
    <canvas id="myCanvas1" width="200" height="100" style="border:1px solid #c3c3c3;">
        Your browser does not support the canvas element.
    </canvas>
    <p>在canvas中绘制圆形, 我们将使用以下方法:</p>
    <p>arc(x,y,r,start,stop)</p>
    <textarea id="myCanvas1">
		<script type="text/javascript">
	    var c = document.getElementById("myCanvas1");
	    var cxt = c.getContext("2d");
	    cxt.fillStyle = "#FF0000";
	    cxt.beginPath();
	    cxt.arc(70, 18, 15, 0, Math.PI * 2, true);
	    cxt.closePath();
	    cxt.fill();
	    </script>
    </textarea>
 
    <script type="text/javascript">
    var c = document.getElementById("myCanvas1");
    var cxt = c.getContext("2d");
    cxt.fillStyle = "#FF0000";
    cxt.beginPath();
    cxt.arc(70, 18, 15, 0, Math.PI * 2, true);
    cxt.closePath();
    cxt.fill();
    </script>
    <!-- 3 -->
    <canvas id="myCanvas3" width="200" height="100" style="border:1px solid #c3c3c3;">
        Your browser does not support the canvas element.
    </canvas>
    <img src="eg_flower.png" style="display: none">
    <textarea>
		<script type="text/javascript">
	    var c = document.getElementById("myCanvas3");
	    var cxt = c.getContext("2d");
	    var img = new Image()
	    img.src = "eg_flower.png"
	    cxt.drawImage(img, 0, 0);
	    </script>
    </textarea>
    <script type="text/javascript" class="joldy">
	    var c = document.getElementById("myCanvas3");
	    var cxt = c.getContext("2d");
	    var img = new Image()
	    img.src = "eg_flower.png"
	    cxt.drawImage(img, 0, 0);
    </script>
    <!-- 4 -->
    <p>
        使用 canvas 绘制文本，重要的属性和方法如下：
    </p>
    <p>font - 定义字体</p>
    <p>fillText(text,x,y) - 在 canvas 上绘制实心的文本</p>
    <p>strokeText(text,x,y) - 在 canvas 上绘制空心的文本</p>
    <canvas id="myCanvas4" width="300" height="200" style="border:1px solid #d3d3d3;">
        您的浏览器不支持 HTML5 canvas 标签。</canvas>
    <script type="text/javascript">
    var c = document.getElementById("myCanvas4");
    var ctx = c.getContext("2d");
    ctx.font = "30px YaHei";
    ctx.fillStyle = "red";
    ctx.fillText("Hello World", 10, 50);
    /*
    	fillText(text,x,y,maxWidth);
    	text	规定在画布上输出的文本。
    	x	开始绘制文本的 x 坐标位置（相对于画布）。
    	y	开始绘制文本的 y 坐标位置（相对于画布）。
    	maxWidth	可选。允许的最大文本宽度，以像素计。
    */
    ctx.strokeStyle = "red";
    ctx.strokeText("Hello World", 20, 100);
    </script>
    <!-- 5 -->
    <pre>
		Canvas - 渐变
		渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
		以下有两种不同的方式来设置Canvas渐变：
		createLinearGradient(x,y,x1,y1) - 创建线条渐变
		createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
		当我们使用渐变对象，必须使用两种或两种以上的停止颜色。
		addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.
		使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。
		使用 createLinearGradient():
	</pre>
    <canvas id="myCanvas5" width="300" height="200" style="border:1px solid #d3d3d3;"></canvas>
    <script type="text/javascript">
    var c = document.getElementById("myCanvas5");
    var ctx = c.getContext("2d");
 
    // 创建渐变
    /*
				addColorStop(stop,color); 方法规定 gradient 对象中的颜色和位置。
				stop: 介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置
				color: 在结束位置显示的 CSS 颜色值
	        */
    var grd = ctx.createLinearGradient(0, 0, 200, 0);
    grd.addColorStop(0, "red");
    grd.addColorStop(1, "white");
 
    // 填充渐变
    ctx.fillStyle = grd;
    ctx.fillRect(10, 10, 150, 80);
 
    // 创建渐变
    var grd1 = ctx.createRadialGradient(75, 140, 5, 90, 150, 100);
    grd1.addColorStop(0, "red");
    grd1.addColorStop(1, "white");
 
    // 填充渐变
    ctx.fillStyle = grd1;
    ctx.fillRect(10, 100, 150, 80); // fillRect(x,y,width,height); 矩形左上角的 x 坐标; 矩形左上角的 y 坐标; 矩形的宽度，以像素计; 矩形的高度，以像素计
    </script>
    <!-- 6 -->
    <p>canvas渐变文字</p>
    <canvas id="canvas6" width="600" height="200"></canvas>
    <script type="text/javascript">
    var canvas = document.getElementById('canvas6'),
        ctx = canvas.getContext('2d'),
        gradient = ctx.createLinearGradient(0, 0, canvas.width, 0); // 渐变开始点的 x 坐标; 渐变开始点的 y 坐标; 渐变结束点的 x 坐标; 渐变结束点的 y 坐标
    gradient.addColorStop('0', 'black');
    gradient.addColorStop('0.3', 'green');
    gradient.addColorStop('0.6', 'yellow');
    gradient.addColorStop('1', 'red');
    /*
				addColorStop(stop,color); 方法规定 gradient 对象中的颜色和位置。
				stop: 介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置
				color: 在结束位置显示的 CSS 颜色值
	        */
 
    ctx.font = '40px yahei';
    ctx.fillStyle = gradient
 
    ctx.fillText('hello world', 100, 100);
    </script>
    <!-- canvas7 绘制一个带有黑色阴影的蓝色矩形： -->
    <p>绘制一个带有黑色阴影的蓝色矩形：</p>
    <canvas id="canvas7" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
    <pre>
		<code>
			var c=document.getElementById("canvas7");
		var ctx=c.getContext("2d");
		ctx.shadowBlur=20;
		ctx.fillStyle="blue";
 
		ctx.shadowColor="black";
		ctx.fillRect(20,20,100,80);
 
		ctx.shadowColor="red";
		ctx.fillRect(140,20,100,80);
		</code>
	</pre>
    <script type="text/javascript">
    var c = document.getElementById("canvas7");
    var ctx = c.getContext("2d");
    ctx.shadowBlur = 20; // 返回阴影的模糊级数
    ctx.shadowOffsetX = 20; // 正值或负值，定义阴影与形状的水平距离。
    ctx.shadowOffsetY = 20; // 正值或负值，定义阴影与形状的垂直距离。
    ctx.fillStyle = "blue";
 
    ctx.shadowColor = "black";
    ctx.fillRect(20, 20, 100, 80);
 
    ctx.shadowColor = "red";
    ctx.fillRect(140, 20, 100, 80);
    </script>
    <!-- canvas 8 canvas lineCap lineJoin lineWidth  属性 -->
    <p>canvas lineCap 属性</p>
    <canvas id="canvas8" width="300" height="300" style="border:1px solid #d3d3d3;"></canvas>
    <script>
    var c = document.getElementById("canvas8");
    var ctx = c.getContext("2d");
 
    ctx.beginPath();
    ctx.lineWidth = 10; // 属性设置或返回当前线条的宽度，以像素计。
 
    ctx.lineCap = "butt"; // 向线条的每个末端添加平直的边缘。
    ctx.moveTo(20, 20);
    ctx.lineTo(200, 20);
    ctx.stroke();
 
    ctx.beginPath();
    ctx.lineCap = "round"; // 向线条的每个末端添加圆形线帽。
    ctx.moveTo(20, 40);
    ctx.lineTo(200, 40);
    ctx.stroke();
 
    ctx.beginPath();
    ctx.lineCap = "square"; // 向线条的每个末端添加正方形线帽。
    ctx.moveTo(20, 60);
    ctx.lineTo(200, 60);
    ctx.stroke();
 
    // lineJoin 属性设置或返回所创建边角的类型，当两条线交汇时。
    ctx.beginPath();
    ctx.lineJoin = "round";
    ctx.moveTo(80, 80);
    ctx.lineTo(150, 110);
    ctx.lineTo(80, 160);
    ctx.stroke();
 
 
    /*
    	miterLimit 属性设置或返回最大斜接长度。
    	斜接长度指的是在两条线交汇处内角和外角之间的距离。
    	提示：只有当 lineJoin 属性为 "miter" 时，miterLimit 才有效。
    	边角的角度越小，斜接长度就会越大。
    	为了避免斜接长度过长，我们可以使用 miterLimit 属性。
    */
    ctx.beginPath();
    ctx.lineJoin = "miter";
    ctx.miterLimit = 50;
    ctx.moveTo(160, 160);
    ctx.lineTo(200, 167);
    ctx.lineTo(160, 174);
    ctx.stroke();
    </script>
    <!-- canvas9 转换 -->
    <p>转换</p>
    <pre>
		定义和用法
		scale() 方法缩放当前绘图，更大或更小。
		注释：如果您对绘图进行缩放，所有之后的绘图也会被缩放。定位也会被缩放。如果您 scale(2,2)，那么绘图将定位于距离画布左上角两倍远的位置。
 
		JavaScript 语法：
		context.scale(scalewidth,scaleheight);
		参数值
		参数	描述
		scalewidth	缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推)
		scaleheight	缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, etc.)
	</pre>
    <canvas id="canvas9" width="1000" height="250" style="border:1px solid #d3d3d3;"></canvas>
    <script type="text/javascript">
    var c = document.getElementById("canvas9");
    var ctx = c.getContext("2d");
    ctx.strokeRect(5, 5, 25, 15);
    ctx.scale(2, 2); // 放大200%
    ctx.strokeRect(5, 5, 25, 15);
    ctx.scale(2, 2);
    ctx.strokeRect(5, 5, 25, 15);
    ctx.scale(2, 2);
    ctx.strokeRect(5, 5, 25, 15);
 
    // rotate
    ctx.scale(0.1, 0.1);
    ctx.rotate(20 * Math.PI / 180);
    ctx.fillRect(400, 20, 100, 50);
    </script>
    <p>canvas transform()</p>
    <pre>
		绘制一个矩形；通过 transform() 添加一个新的变换矩阵，再次绘制矩形；添加一个新的变换矩阵，然后再次绘制矩形。
		请注意，每当您调用 transform() 时，它都会在前一个变换矩阵上构建：
 
		JavaScript 语法：
		context.transform(a,b,c,d,e,f);
		参数值
		参数	描述
		a	水平缩放绘图
		b	水平倾斜绘图
		c	垂直倾斜绘图
		d	垂直缩放绘图
		e	水平移动绘图
		f	垂直移动绘图
	</pre>
    <canvas id="canvas10" width="1000" height="250" style="border:1px solid #d3d3d3;"></canvas>
    <script>
    var c = document.getElementById("canvas10");
    var ctx = c.getContext("2d");
 
    ctx.fillStyle = "yellow";
    ctx.fillRect(0, 0, 250, 100)
 
    ctx.transform(1, 0.5, -0.5, 1, 30, 10);
    ctx.fillStyle = "red";
    ctx.fillRect(0, 0, 250, 100);
 
    ctx.transform(1, 0.5, -0.5, 1, 30, 10);
    ctx.fillStyle = "blue";
    ctx.fillRect(0, 0, 250, 100);
    </script>
    <p>canvas setTransform() 方法</p>
    <pre>
		绘制一个矩形，通过 setTransform() 重置并创建新的变换矩阵，再次绘制矩形，重置并创建新的变换矩阵，然后再次绘制矩形。
		请注意，每当您调用 setTransform() 时，它都会重置前一个变换矩阵然后构建新的矩阵，因此在下面的例子中，不会显示红色矩形，因为它在蓝色矩形下面：
	</pre>
    <canvas id="canvas11" width="1000" height="250" style="border:1px solid #d3d3d3;"></canvas>
    <script>
    var c = document.getElementById("canvas11");
    var ctx = c.getContext("2d");
 
    ctx.fillStyle = "yellow";
    ctx.fillRect(0, 0, 250, 100)
 
    ctx.setTransform(1, 0.5, -0.5, 1, 30, 10);
    ctx.fillStyle = "red";
    ctx.fillRect(0, 0, 250, 100);
 
    ctx.setTransform(1, 0.5, -0.5, 1, 30, 10);
    ctx.fillStyle = "blue";
    ctx.fillRect(0, 0, 250, 100);
    </script>
    <!-- canvas -->
    <p>canvas星空背景</p>
    <canvas id="starrynight"></canvas>
    <script>
    function drawing() {
        var c = document.getElementById('starrynight');
        var ctx = c.getContext('2d');
        var xMax = c.width = 700; //获取浏览器的屏幕的可用宽度
        var yMax = c.height = 300; //获取浏览器的屏幕的可用高度
 
        var hmTimes = Math.round(xMax + yMax); //获得 int 四舍五入(绘制星星数量)
 
        for (var i = 0; i <= hmTimes; i++) {
            var randomX = Math.floor((Math.random() * xMax) + 1); //绘制矩形的X坐标（1-xMax的随机数）
            var randomY = Math.floor((Math.random() * yMax) + 1); //绘制矩形的Y坐标（1-yMax的随机数）
            var randomSize = Math.floor((Math.random() * 2) + 1); //星星大小（1-2随机数）
            var randomOpacityOne = Math.floor((Math.random() * 9) + 1); //随机1-9透明度值
            var randomOpacityTwo = Math.floor((Math.random() * 9) + 1); //随机1-9透明度值
            var randomHue = Math.floor((Math.random() * 360) + 1); //随机1-360颜色值
            //大于1添加阴影
            if (randomSize > 1) {
                ctx.shadowBlur = Math.floor((Math.random() * 15) + 5); //阴影，随机5-15
                ctx.shadowColor = "white"; //阴影颜色，白色
            }
            ctx.fillStyle = "hsla(" + randomHue + ", 30%, 80%, ." + randomOpacityOne + randomOpacityTwo + ")"; //hsla 颜色设置（a是透明度）
            ctx.fillRect(randomX, randomY, randomSize, randomSize); //绘制矩形
        }
    }
    drawing();
    </script>
    <!-- canvas -->
    <p>canvas动画</p>
    <canvas id="canvas_1"></canvas>
    <script type="text/javascript" src="common.js"></script>
    <p>想继续学习的同学可以登录 <a href="http://canvas.migong.org">migong</a> 进行学习</p>
    <!-- 引入CodeMirror核心文件 -->
    <script type="text/javascript" src="codemirror.js"></script>
    <!-- CodeMirror支持不同语言，根据需要引入JS文件 -->
    <!-- 因为HTML混合语言依赖Javascript、XML、CSS语言支持，所以都要引入 -->
    <script type="text/javascript" src="codemirror/mode/javascript/javascript.js"></script>
    <script type="text/javascript" src="codemirror/mode/xml/xml.js"></script>
    <script type="text/javascript" src="codemirror/mode/css/css.js"></script>
    <script type="text/javascript" src="codemirror/mode/htmlmixed/htmlmixed.js"></script>
    <!-- 下面分别为显示行数、括号匹配和全屏插件 -->
    <script type="text/javascript" src="codemirror/addon/selection/active-line.js"></script>
    <script type="text/javascript" src="codemirror/addon/edit/matchbrackets.js"></script>
    <script type="text/javascript" src="codemirror/addon/display/fullscreen.js"></script>
    <script type="text/javascript">
    /*$(document).ready(function() {
    	  $('pre code').each(function(i, block) {
    	    hljs.highlightBlock(block);
    	  });
    	});*/
    (function($) {
    	var ele = document.getElementsByTagName('textarea');
    	/*var arr = [];
    	for ( var i = 0; i < ele.length; i++) {
    		arr.push(`
    			editor${i} = CodeMirror.fromTextArea(ele[${i}], {
		            lineNumbers: true, // 显示行数
		            indentUnit: 4, // 缩进单位为4
		            styleActiveLine: true, // 当前行背景高亮
		            matchBrackets: true, // 括号匹配
		            mode: 'htmlmixed', // HMTL混合模式
		            lineWrapping: true, // 自动换行
		            theme: 'monokai', // 使用monokai模版
		        });
		        editor${i}.on("change", function (edt, changes) {
		        	console.log(edt.getValue());
		        	//eval('(' + edt.getValue() + ')');
		        	$('.joldy').remove();
		        	var c=$("#myCanvas");
				    c.attr('width', c.width());
					c.attr('height', c.height());
		        	$('body').append(edt.getValue());
		        	editor.refresh();
			　　});
		        `
			)
    	}
    	for(var i = 0; i < arr.length; i++) {
    		eval(arr[i]);
    	}*/
 
    	var id1 = CodeMirror.fromTextArea(document.getElementById('joldy'), {
            lineNumbers: true, // 显示行数
            indentUnit: 4, // 缩进单位为4
            styleActiveLine: true, // 当前行背景高亮
            matchBrackets: true, // 括号匹配
            mode: 'htmlmixed', // HMTL混合模式
            lineWrapping: true, // 自动换行
            theme: 'monokai', // 使用monokai模版
        });
 
        id1.setOption("extraKeys", {
            // Tab键换成4个空格
            Tab: function(cm) {
                var spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
                cm.replaceSelection(spaces);
            },
            // F11键切换全屏
            "F11": function(cm) {
                cm.setOption("fullScreen", !cm.getOption("fullScreen"));
            },
            // Esc键退出全屏
            "Esc": function(cm) {
                if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
            }
        });
 
        id1.on("change", function (edt, changes) {
		        	console.log(edt.getValue());
		        	//eval('(' + edt.getValue() + ')');
		        	$('.joldy').remove();
		        	var c=$("#myCanvas");
				    c.attr('width', c.width());
					c.attr('height', c.height());
		        	$('body').append(edt.getValue());
 
		        	editor.refresh();
			　　});
 
    })(jQuery);
    </script>
</body>
 
</html>


var canvas       = document.querySelector('#canvas_1'),
    ctx          = canvas.getContext('2d'),     //获取该canvas的2D绘图环境对象
    particles    = [],
    patriclesNum = 10,
    w            = 500,
    h            = 500,
    colors       = ['#f35d4f', '#f36849', '#c0d988', '#6ddaf1', '#f1e85b'];
 
canvas.width  = 500;
canvas.height = 500;
// canvas.style.left = (window.innerWidth - 500)/2+'px';
 
/*if(window.innerHeight>500)
canvas.style.top = (window.innerHeight - 500)/2+'px';*/
 
function Factory() {
    this.x    = Math.round(Math.random() * w);          // x轴随机坐标
    this.y    = Math.round(Math.random() * h);          // y轴随机坐标
    this.rad  = Math.round(Math.random() * 1) + 1;
    this.rgba = colors[Math.round(Math.random() * 3)];  // 随机选取color颜色
    this.vx   = Math.round(Math.random() * 3) - 1.5;    // x轴正负加减1.5
    this.vy   = Math.round(Math.random() * 3) - 1.5;    // y轴正负加减1.5
}
 
function draw() {
    ctx.clearRect(0, 0, w, h);      //通过clearRect来擦除画布
    ctx.globalCompositeOperation = 'lighter';
    for (var i = 0; i < patriclesNum; i++) {
        var temp = particles[i];
        var factor = 1;
 
        for (var j = 0; j < patriclesNum; j++) {
 
            var temp2 = particles[j];
            ctx.linewidth = 0.5;
 
            if (temp.rgba == temp2.rgba && findDistance(temp, temp2) < 50) {
                ctx.strokeStyle = temp.rgba;
                ctx.beginPath();
                ctx.moveTo(temp.x, temp.y);
                ctx.lineTo(temp2.x, temp2.y);
                ctx.stroke();
                factor++;
            }
        }
 
 
        ctx.fillStyle = temp.rgba;
        ctx.strokeStyle = temp.rgba;
 
        ctx.beginPath();    // 重置画笔，避免污染
        ctx.arc(temp.x, temp.y, temp.rad * factor, 0, Math.PI * 2, true);
        ctx.fill();         // 填充
        ctx.closePath();
 
        ctx.beginPath();    // 重置画笔，避免污染
        ctx.arc(temp.x, temp.y, (temp.rad + 10) * factor, 0, Math.PI * 2, true);
        ctx.stroke();       //描边
        ctx.closePath();
 
 
        temp.x += temp.vx;      // x轴正负加减1.5
        temp.y += temp.vy;      // y轴正负加减1.5
        if (temp.x > w) temp.x = 0;
        if (temp.x < 0) temp.x = w;
        if (temp.y > h) temp.y = 0;
        if (temp.y < 0) temp.y = h;
    }
}
 
function findDistance(p1, p2) {
    return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
}
 
window.requestAnimFrame = (function() {
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        function(callback) {
            window.setTimeout(callback, 1000 / 60);
        };
})();
 
(function init() {
    for (var i = 0; i < patriclesNum; i++) {
        particles.push(new Factory);
    }
})();
 
(function loop() {
    draw();
    requestAnimFrame(loop);
})();