一个简单的html5画板

最新推荐文章于 2024-04-05 16:47:48 发布

KarlDoenitz

最新推荐文章于 2024-04-05 16:47:48 发布

阅读量2.3k

点赞数 1

分类专栏： html

本文链接：https://blog.csdn.net/KarlDoenitz/article/details/9191125

版权

html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Paint</title>
    <script type="text/javascript" src="draw.js" language="javascript"></script>
</head>
<body>
    <div>
        <canvas id="myCanvas" style="border: 2px solid red; background-image:url(juren.jpg)" height="349px" width="349px"></canvas>
    </div>
    <select name="kind" id="k" οnchange="KarlChangeColor()">
          <option value="black">黑色</option>
          <option value="blue">蓝色</option>
          <option value="red">红色</option>
          <option value="green">绿色</option>
          <option value="yellow">黄色</option>
          <option value="purple">紫色</option>
          <option value="white">橡皮</option>
    </select>
    <input type="text" value="4" id="karlline" οnchange="KarlChangeLineWidth()"/>
</body>
</html>

这是js文件：

// JavaScript Document
	var colorKarlDraw = "black";
	var LineWidth = 4;
	
	function KarlChangeLineWidth()
	{
		var KarlColorWidth = document.getElementById("karlline").value;
		LineWidth = KarlColorWidth;
	}
	
	function KarlChangeColor()
	{
		var KarlColor = document.getElementById("k").value;
		colorKarlDraw = KarlColor;
	}
	
        window.onload = function () {
            var canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext("2d");

            //鼠标左键按下
            canvas.onmousedown = function (e) {
                //开始记录路径
                ctx.beginPath();
                //将光标焦点移动到鼠标点击的位置
                ctx.moveTo(e.clientX - 10, e.clientY - 10);
                //设置当前绘线的粗细(默认1.0)[由于画布的坐标和像素并不是直接对应的，所以，此属性会有0.5像素的偏差]
                ctx.lineWidth = LineWidth;
                //设置绘线颜色
                ctx.strokeStyle = colorKarlDraw;
                //                //设置渐变(会替换掉绘线颜色)
                //                var lingrad = ctx.createLinearGradient(0, 0, 0, 600);
                //                lingrad.addColorStop(0, "#00ABEB");
                //                lingrad.addColorStop(0.5, "#fff");
                //                lingrad.addColorStop(1, "#66CC00");
                //                ctx.strokeStyle = lingrad;

                //设置绘线透明度(0.0-1.0默认1.0)
                ctx.globalAlpha = 1.0;
                //设置绘线端点显示的样子(round/butt/square)
                ctx.lineCap = "round";
                //设置线段拐角连接处显示的样子(round/bevel/miter默认)
                ctx.lineJoin = "round";

                //当鼠标左键按下时，监听鼠标移动事件
                canvas.onmousemove = function (e) {
                    //用线段连接点
                    ctx.lineTo(e.clientX - 10, e.clientY - 10);
                    //用笔画描绘路径[可以试一下fill(),看看是什么效果哦]
                    ctx.stroke();
                }
            }
            //当鼠标按下后，释放鼠标时，停止监听鼠标移动事件
            canvas.onmouseup = function (e) {
                canvas.onmousemove = null;
            }
            //直线渐变的示例
            function drawLinear() {
                // Create gradients(x1,y1,x2,y2)
                var lingrad = ctx.createLinearGradient(0, 0, 0, 150);
                //上色(position,color)[position value between 0.0 and 1.0]
                lingrad.addColorStop(0, 'blue');
                lingrad.addColorStop(0.5, '#fff');
                lingrad.addColorStop(0.5, '#66CC00');
                lingrad.addColorStop(1, 'red');

                var lingrad2 = ctx.createLinearGradient(0, 50, 0, 95);
                lingrad2.addColorStop(0.5, '#000');
                lingrad2.addColorStop(1, 'rgba(0,0,0,0)');

                // assign gradients to fill and stroke styles
                ctx.fillStyle = lingrad;
                ctx.strokeStyle = lingrad2;

                // draw shapes
                ctx.fillRect(10, 10, 130, 130);
                ctx.strokeRect(50, 50, 50, 50);

            }
            //径向渐变的示例
            function drawRadial() {
                var ctx = document.getElementById('myCanvas').getContext('2d');

                // Create gradients（x1,y1,r1,x2,y2,r2）
                var radgrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30);
                radgrad.addColorStop(0, '#A7D30C');
                radgrad.addColorStop(0.9, '#019F62');
                radgrad.addColorStop(1, 'rgba(1,159,98,0)');

                var radgrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50);
                radgrad2.addColorStop(0, '#FF5F98');
                radgrad2.addColorStop(0.75, '#FF0188');
                radgrad2.addColorStop(1, 'rgba(255,1,136,0)');

                var radgrad3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40);
                radgrad3.addColorStop(0, '#00C9FF');
                radgrad3.addColorStop(0.8, '#00B5E2');
                radgrad3.addColorStop(1, 'rgba(0,201,255,0)');

                var radgrad4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90);
                radgrad4.addColorStop(0, '#F4F201');
                radgrad4.addColorStop(0.8, '#E4C700');
                radgrad4.addColorStop(1, 'rgba(228,199,0,0)');

                // draw shapes
                ctx.fillStyle = radgrad4;
                ctx.fillRect(0, 0, 150, 150);
                ctx.fillStyle = radgrad3;
                ctx.fillRect(0, 0, 150, 150);
                ctx.fillStyle = radgrad2;
                ctx.fillRect(0, 0, 150, 150);
                ctx.fillStyle = radgrad;
                ctx.fillRect(0, 0, 150, 150);
            }
            //用图案填充画布的示例
            function drawImage() {
                var ctx = document.getElementById("myCanvas").getContext("2d");
                var img = new Image();
                img.src = "Images/1.jpg";
                img.onload = function () {
                    var ptrn = ctx.createPattern(img, "repeat");
                    ctx.fillStyle = ptrn;
                    ctx.fillRect(0, 0, 400, 400);
                }
            }
            //设置阴影的示例
            function drawText() {
                var ctx = document.getElementById('myCanvas').getContext('2d');

                ctx.shadowOffsetX = 2;
                ctx.shadowOffsetY = 2;
                ctx.shadowBlur = 2;
                ctx.shadowColor = "lime";

                ctx.font = "20px Times New Roman";
                ctx.fillStyle = "black";
                ctx.fillText("Sample String", 5, 30);
            }
        }