canvas基础绘画

Posted tqzuy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了canvas基础绘画相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div style="height: 100px"></div>
<div style="text-align: center">
    <canvas id="myCanvas" style="border: 1px solid gray;background-color: lightblue" width="600" height="400">
    </canvas>
</div>
<!--<img src="../img/5.jpg" id="img1" width="200"/>-->
<div>
    <input type="button" value="绘制文字" οnclick="wenzi()"/>
    <input type="button" value="绘制空心文字" οnclick="wenzi2()"/>
    <input type="button" value="绘制矩形" οnclick="juxing()"/>
    <input type="button" value="绘制实心矩形" οnclick="juxing2()"/>
</div>
<div>
    <input type="button" value="清空矩形区域" οnclick="closees()"/>
    <input type="button" value="画图片" οnclick="tupian()"/>
    <input type="button" value="画图片2" οnclick="tupian2()"/>
</div>
<div>
    <input type="button" value="画路径2" οnclick="lujing2()"/>
    <input type="button" value="画路径" οnclick="lujing()"/>
    <input type="button" value="画贝塞尔曲线路径" οnclick="lujing3()"/>
    <input type="button" value="画扇形" οnclick="lujing4()"/>
</div>
<script>
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    var img=document.getElementById("img1");
    function lujing4()
//      画扇形,参数共计6个,至少需要5个
//      1---圆心坐标X   2----圆心坐标Y
//      3---半径长度,单位像素
//      4----开始角度,5----结束角度
//        6----是否为顺时针绘制,默认值false,为顺时针
        cxt.arc(200,200,100,0, Math.PI);
        cxt.stroke();
   
    function lujing3()
        cxt.moveTo(20,20);
        cxt.quadraticCurveTo(10,50,100,50);
        cxt.stroke();
   
    function lujing2()
// 有了beginPath和closePath之后,绘制的路径线条最后会自动闭合(从结束的坐标绘制一条路径到开始的坐标点)
// beginPath和closePath必须成对出现
        cxt.beginPath();
        cxt.moveTo(100,100);
        cxt.lineTo(150,150);
        cxt.lineTo(50,200);
        cxt.closePath();
        cxt.stroke();
   
    function lujing()
//        moveTo  将画笔的指定到界面的某一个坐标点
        cxt.moveTo(100,350);
        cxt.moveTo(350,350);
//        lineTo  从上一个坐标点跳到下一个坐标点并绘制2点之间的路径
//        如果没有初始化坐标点,那么lineTo等同于moveTo
        cxt.lineTo(50,50);
        cxt.lineTo(40,40);
//        stroke是将内存中的运行结果真正的绘制到界面
        cxt.stroke();
   
    function tupian2()
        cxt.drawImage(img,0,0,100,200,300,100,200,300)
   
    function tupian()
        cxt.drawImage(img,0,0,200,200)
   
    function closees()
        cxt.clearRect()
   
    function juxing2()
        cxt.fillRect(210,100,210,100);
        cxt.fillStyle="orangered";
        cxt.fillRect(205,95,210,100);
   
    function juxing()
        cxt.strokeRect(210,100,210,100)
   
    function wenzi2()
        cxt.font='36px 楷体';
        cxt.fillStyle="blue";
        cxt.strokeText("PG32--唐漆",40,340)
   
    function wenzi()
        //fillText函数,功能是绘制文字内容在画布中
//        参数总计有4个   1----将要绘制出了的文字
//        2------绘制的X坐标点     3------绘制的Y坐标点
//        4------文字内容显示的最大宽度,避免文字溢出或者叫超出可以控制的范围
//        坐标点的位置默认在第一个文字的左下角1
        cxt.font='36px 楷体';
        cxt.fillStyle="blue";
        cxt.fillText("PG32--唐漆",40,80)
   


</script>


</body>
</html>

以上是关于canvas基础绘画的主要内容,如果未能解决你的问题,请参考以下文章

canvas基础绘画

canvas入门

JavaEE——HTML5绘画

canves基础自整理

canvas基础用法

html5- canvas(绘画形状)