Html中Canvas的各种图形的demo资源-CSDN文库

共9个文件

html：8个

js：1个

canvas

svg

rect

需积分: 9 110 浏览量 2016-10-10 11:48:41 上传评论 1 收藏 8KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

htmlCanvasDemo.rar （9个子文件）

htmlCanvasDemo

sidett.html 501B

testdiv.html 1KB

fishcomponent.js 4KB

slide.html 4KB

testtable.html 2KB

drawtable.html 3KB

drawrec.html 7KB

testsvg.html 294B

drawbig.html 2KB

<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="chrome=IE8"> <meta http-equiv="Content-type" content="text/html;charset=UTF-8"> <title>Canvas Rounded Rectangle Demo</title> <script src="fishcomponent.js"></script> <link href="default.css" rel="stylesheet"/> <script> window.onload = function () { var canvas = document.getElementById("text_canvas"); console.log(canvas.parentNode.clientWidth); canvas.width = canvas.parentNode.clientWidth; canvas.height = canvas.parentNode.clientHeight; if (!canvas.getContext) { console.log("Canvas not supported. Please install a HTML5 compatible browser."); return; } var context = canvas.getContext('2d'); //渐变 var grd = context.createLinearGradient(50, 30, 150, 150); grd.addColorStop(0.9, "#f6f9fc"); grd.addColorStop(0.28, "#17375e"); grd.addColorStop(0.43, "#8064a2"); grd.addColorStop(0.74, "#e46c0a"); grd.addColorStop(0.83, "#b0c6e1"); grd.addColorStop(0.94, "#bdd0e6"); grd.addColorStop(1.0, "#cad9eb"); context.fillStyle = grd; context.fillRect(50, 30, 150, 150); //画线 context.moveTo(50, 550); context.lineTo(200, 550); context.stroke(); //画圆 context.beginPath(); context.fillStyle = "#FFFFFF"; context.arc(700, 100, 50, 0, Math.PI / 180 * 360, true); context.strokeStyle = "rgba(0,0,0,0.5)"; context.stroke(); context.closePath(); context.fill(); //画图片 var img1 = new Image(); img1.src = "image/jsjsm.png"; img1.onload = function () { context.drawImage(img1, 930, 30, 250, 130); }; //图片填充矩形 var img2 = new Image(); img2.src = "image/pp.png"; //当图片加载完毕后再设置对应的图像平铺模式并填充矩形 img2.onload = function () { //创建CanvasPattern对象，指定上述图片进行水平和垂直方向的重复平铺 //repeat-x repeat-y no-repeat var pattern = context.createPattern(img2, "no-repeat"); context.fillStyle = pattern; //从坐标点(0,0)开始，绘制并填充宽度为200px、高度为100px的矩形 context.fillRect(630, 250, 250, 160); } //图案填充 var img = new Image(); //指定图片的URL img.src = "image/deng.png"; //当图片加载完毕后再设置对应的图像平铺模式并填充矩形 img.onload = function () { //创建CanvasPattern对象，指定上述图片进行水平和垂直方向的重复平铺 var pattern = context.createPattern(img, "repeat"); context.fillStyle = pattern; //从坐标点(0,0)开始，绘制并填充宽度为200px、高度为100px的矩形 context.fillRect(930, 250, 250, 160); } //画矩形 context.strokeStyle = 'rgba(255,0,0,0.5)'; context.fillStyle = 'rgba(255,0,0,0.5)'; //设置阴影 context.shadowOffsetX = 10; context.shadowOffsetY = 10; context.shadowColor = 'rgba(100,100,100,0.5)'; context.shadowBlur = 1.5; context.lineWidth = 1; context.rect(50, 250, 150, 150); context.strokeRect(50, 250, 150, 150); //画扇形 context.strokeStyle = "blue"; context.sector(350, 530, 90, 0, Math.PI / 180 * 60);//通过js实现 //画圆角矩形 context.strokeStyle = "red"; context.fillStyle = "RGBA(100,255,100, 0.5)"; context.roundRect(290, 250, 150, 150, 5, true);//通过js实现 //画线条 context.strokeStyle = "blue"; for (var i = 0; i < 5; i++) { var delta = i * 20; var pattern = i * 2 + 1; context.dashedLineTo(250, 50 + delta, 550, 50 + delta, pattern); } context.stroke(); //画统计图 var deg = Math.PI / 180; context.sector(700, 550, 80, 30 * deg, 111 * deg); context.fillStyle = "#f00000"; context.stroke(); context.sector(700, 550, 80, 111 * deg, 190 * deg); context.fillStyle = "#0f0000"; context.stroke(); context.sector(700, 550, 80, 190 * deg, 233 * deg); context.fillStyle = "#00f000"; context.stroke(); context.sector(700, 550, 80, 233 * deg, 280 * deg); context.fillStyle = "#789000"; context.stroke(); context.sector(700, 550, 80, 280 * deg, 345 * deg); context.fillStyle = "#abcdef"; context.stroke(); context.sector(700, 550, 80, 345 * deg, 30 * deg); context.stroke(); //添加文字注释 context.strokeStyle = "#000000"; context.font = "20px Georgia"; context.fillText("渐变填充矩形", 50, 205); context.strokeText("渐变填充矩形", 50, 205); context.fillText("线条", 250 + 50, 175); context.strokeText("线条", 250 + 50, 175); context.fillText("矩形", 100, 435); context.strokeText("矩形", 100, 435); context.fillText("线条", 100, 580); context.strokeText("线条", 100, 580); context.fillText("纯色填充圆角矩形", 290, 435); context.strokeText("纯色填充圆角矩形", 290, 435); context.fillText("圆形", 670, 175); context.strokeText("圆形", 670, 175); context.fillText("画图片", 1000, 185); context.strokeText("画图片", 1000, 185); context.fillText("图片填充矩形", 630, 435); context.strokeText("图片填充矩形", 630, 435); context.fillText("图案填充矩形", 1000, 435); context.strokeText("图案填充矩形", 1000, 435); context.fillText("扇形", 430, 580); context.strokeText("扇形", 430, 580); context.fillText("统计图", 800, 580); context.strokeText("统计图", 800, 580); } </script> </head> <body> <div id="box_plot">  <canvas id="text_canvas" width="1200" height="1200" style="border: solid 1px #000000;"></canvas> <div><span id="sheet1" onclick="tabChange(this)"></span></div> </div> </body> </html>

评论收藏

内容反馈