HTML5使用Canvas绘图小例

最新推荐文章于 2023-10-30 23:25:34 发布

疯狂-的-蜗牛

最新推荐文章于 2023-10-30 23:25:34 发布

阅读量4.8k

点赞数

分类专栏：跨平台

本文链接：https://blog.csdn.net/mfcing/article/details/49077115

版权

跨平台专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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;" οnclick="onBtn1()">点击画线</button>
        <button id="btn2" style="height:26px;width:82px;" οnclick="onBtn2()">填充</button>
        <button id="btn2" style="height:26px;width:82px;" οnclick="onBtn3()">文字</button>
        <button id="btn2" style="height:26px;width:82px;" οnclick="onBtn4()">圆</button>
        <button id="btn2" style="height:26px;width:82px;" οnclick="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>