HTML5使用Canvas绘图小例

来源：互联网发布：皇上皇腊肠区别知乎编辑：程序博客网时间：2024/05/19 06:34

CanvasRenderingContext2D对象方法

首先定义canvas标签，获取这个对象后，得到 CanvasRenderingContext2D对象

  var canvas = document.getElementById("myCanvas");            var ctx = canvas.getContext("2d");

方法描述arc()用一个中心点和半径，为一个画布的当前子路径添加一条弧线。arcTo()使用目标点和一个半径，为当前的子路径添加一条弧线。beginPath()开始一个画布中的一条新路径（或者子路径的一个集合）。bezierCurveTo()为当前的子路径添加一个三次贝塞尔曲线。clearRect()在一个画布的一个矩形区域中清除掉像素。clip()使用当前路径作为连续绘制操作的剪切区域。closePath()如果当前子路径是打开的，就关闭它。createLinearGradient()返回代表线性颜色渐变的一个 CanvasGradient 对象。createPattern()返回代表贴图图像的一个 CanvasPattern 对象。createRadialGradient()返回代表放射颜色渐变的一个 CanvasGradient 对象。drawImage()绘制一幅图像。fill()使用指定颜色、渐变或模式来绘制或填充当前路径的内部。fillRect()绘制或填充一个矩形。lineTo()为当前的子路径添加一条直线线段。moveTo()设置当前位置并开始一条新的子路径。quadraticCurveTo()为当前路径添加一条贝塞尔曲线。rect()为当前路径添加一条矩形子路径。restore()为画布重置为最近保存的图像状态。rotate()旋转画布。save()保存 CanvasRenderingContext2D 对象的属性、剪切区域和变换矩阵。scale()标注画布的用户坐标系统。stroke()沿着当前路径绘制或画一条直线。strokeRect()绘制（但不填充）一个矩形。translate()转换画布的用户坐标系统。

实例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!-- saved from url=(0036)http://localhost:55699/WebForm1.aspx --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title></title></head><body>    <form method="post" action="./WebForm1.aspx_files/WebForm1.aspx.htm" id="form1">    <div style="height: 77px; margin-left: 40px">        <input name="TextBox1" type="text" id="TextBox1" style="height:26px;width:444px;">        <input id="btn_search" style="height: 30px;width:80px" type="button" value="搜索"></div>    </form>    <div>        <p style="font:14px 微软雅黑;color:#f000ff">Canvas操作测试</p>        <img id="img1" style="display:none" src="http://www.runoob.com/images/img_the_scream.jpg" width="100" height="300"/>    </div><div><button id="btn1" style="height:26px;width:82px;" onclick="onBtn1()">点击画线</button>        <button id="btn2" style="height:26px;width:82px;" onclick="onBtn2()">填充</button>        <button id="btn2" style="height:26px;width:82px;" onclick="onBtn3()">文字</button>        <button id="btn2" style="height:26px;width:82px;" onclick="onBtn4()">圆</button>        <button id="btn2" style="height:26px;width:82px;" onclick="onBtn5()">绘图</button></div>    <div>        <p style="font:14px;color:#f000ff">Canvas显示:</p>    </div><div><canvas id="myCanvas" width="600" height="600" style="border:1px solid #000000;"></div></canvas>    <script>        function onBtn1()        {            var canvas = document.getElementById("myCanvas");            var ctx = canvas.getContext("2d");            ctx.lineWidth = 2;            ctx.moveTo(0, 0);                   ctx.lineTo(100, 100);            ctx.stroke();        }        function onBtn2()        {            var canvas = document.getElementById("myCanvas");            var ctx = canvas.getContext("2d");            ctx.fillStyle = "#ff00f0";  //设置填充颜色            ctx.fillRect(0, 0, 20, 20); //填充区域        }        function onBtn3()        {            var canvas = document.getElementById("myCanvas");            var ctx = canvas.getContext("2d");            ctx.font = "16px 微软雅黑"; //设置绘制字体            ctx.fillStyle = "#ff0000";  //设置绘制文字的颜色            ctx.fillText("Hello world!", 20, 60);            //绘制空心字            ctx.strokeText("Hello world!", 40, 60);        }        function onBtn4()        {            var canvas = document.getElementById("myCanvas");            var ctx = canvas.getContext("2d");            //绘制圆形            ctx.beginPath();            ctx.lineWidth = "1px";            ctx.arc(50, 50, 20, 0, 2 * Math.PI);            ctx.stroke();   //绘制线条            //填充圆形            ctx.fillStyle = "#00a000";            ctx.beginPath();            ctx.arc(100, 50, 20, 0, 2 * Math.PI);            ctx.fill();     //填充线条内部区域        }        function onBtn5()        {            var canvas = document.getElementById("myCanvas");            var ctx = canvas.getContext("2d");            //绘制图片的两种方式，无缩放            //1、加载DOM中的img标签            var img = document.getElementById("img1");                        ctx.drawImage(img, 0, 100);            //2、加载已知链接的图片            var img1 = new Image(100, 300);            img1.src = "http://avatar.csdn.net/6/6/B/1_mfcing.jpg";            ctx.drawImage(img1, img.naturalWidth + 10, 100);    //naturalWidth图片的原始尺寸            //缩放绘制            ctx.drawImage(img, 0, 0, 30, 90);   //缩放图片尺寸到 30*90            //只绘制部分区域            ctx.drawImage(img, 0, 0, 100, 100, 60, 0, 90, 90);  //绘制图片的 （0，0，100，100）这个区域到 （60，0，150，150）这个区域        }    </script></body></html>

页面运行：

具体的请看注释，本人比较懒。还可以参考菜鸟教程里面的说明。

0 0