<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas</title> <script type="text/javascript" src="../js/jQuery.js"></script> <style type="text/css"> #canvas{ width: 7rem; margin: .25rem 0 0 1.5rem; border: 1px solid black; display: block; } </style> </head> <body> <canvas id="canvas" width="1000" height="600"></canvas> <button>source-over</button> <button>source-atop</button> <button>source-in</button> <button>source-out</button> <button>destination-over</button> <button>destination-atop</button> <button>destination-in</button> <button>destination-out</button> <button>lighter</button> <button>copy</button> <button>xor</button> </body> </html> <script type="text/javascript"> /** * rem 布局初始化 */ $('html').css('font-size', $(window).width()/10); /** * 获取 canvas 画布 * 获取 canvas 绘图上下文环境 */ var canvas = $('#canvas')[0]; var cxt = canvas.getContext('2d'); /** * globalCompositeOperation: 图形的折叠方式 */ $('button').click(function(){ cxt.clearRect(0, 0, canvas.width, canvas.height); cxt.globalCompositeOperation = $(this).html(); cxt.fillStyle = 'red'; cxt.fillRect(100, 100, 400, 200); cxt.fillStyle = 'blue'; cxt.fillRect(300, 200, 400, 200); }); </script>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas</title> <script type="text/javascript" src="../js/jQuery.js"></script> <style type="text/css"> *{ margin: 0; padding: 0; outline: none; border: none; } #canvas{ width: 7rem; margin: .25rem 0 0 1.5rem; border: 1px solid black; } </style> </head> <body> <canvas id="canvas" width="1000" height="600"></canvas> </body> </html> <script type="text/javascript"> /** * rem 布局初始化 */ $('html').css('font-size', $(window).width()/10); /** * 获取 canvas 画布 * 获取 canvas 绘图上下文环境 */ var canvas = $('#canvas')[0]; var cxt = canvas.getContext('2d'); /** * globalAlpha: 透明度 */ for(var i = 0; i < 100; i++){ var R = Math.floor(Math.random()*225); var G = Math.floor(Math.random()*225); var B = Math.floor(Math.random()*225); var x = R + "," + G + "," + B; cxt.fillStyle = "rgb("+x+")"; cxt.globalAlpha = 0.7; cxt.beginPath(); cxt.arc(Math.random()*canvas.width, Math.random()*canvas.height, Math.random()*70, 0, Math.PI*2); cxt.fill(); } </script>
