HTML5 Canvas 制作一个“在线画板”

2019-03-12 13:52|来源: 黄奕能

内容摘要:HTML5 Canvas 部分线条事件,JQuery 部分鼠标事件,然后利用这些知识制作一个“在线画板”的小应用


画板的基本原理



Canvas 部分线条事件

var canvas = document.getElementById('mycanvas');
var p100=canvas.getContext("2d");
 
p100.lineWidth=5;       //定义线条宽度        
p100.strokeStyle=“red”; //定义线条颜色
p100.moveTo(mouseX,mouseY); //起始位置
p100.lineTo(mouseX,mouseY); //终止位置
p100.stroke();          //结束图形


JQuery部分线条事件

$( ).mousedown  //鼠标按下时
$( ).mousemove  //鼠标移动时
$( ).mouseup    //鼠标抬起时
 
$("#mycanvas").mousedown(function(e){
  var mouseX = e.pageX - this.offsetLeft; //获得区域坐标x
  var mouseY = e.pageY - this.offsetTop;  //获得区域坐标y
});


在线画板案例

<!DOCTYPE html> 
<head> 
<meta charset=utf-8>
<title>HTML5视频教程-canvas</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style type="text/css">
    #mycanvas{ border:1px solid #ccc;}
</style>
</head>
<body>
<canvas id="mycanvas" width="500" height="400"></canvas>
 
<script type="text/javascript">
    var canvas = document.getElementById("mycanvas");
    var p100=canvas.getContext("2d");
    p100.lineWidth=5;
    p100.strokeStyle="red";
    var pp=false; 
      
    //当鼠标按下时
    $("#mycanvas").mousedown(function(e){
        var mouseX = e.pageX - this.offsetLeft;
        var mouseY = e.pageY - this.offsetTop;
        pp=true;
        //起始位置
        p100.moveTo(mouseX,mouseY); 
    });
  
    //当鼠标抬起时
    $("#mycanvas").mouseup(function(e){
        pp=false;
    });
  
    //当鼠标移动时
    $("#mycanvas").mousemove(function(e){
        var mouseX = e.pageX - this.offsetLeft;
        var mouseY = e.pageY - this.offsetTop;
        if(pp){
            //终止位置
            p100.lineTo(mouseX,mouseY); 
            //结束图形
            p100.stroke();              
        }
    });
</script>
</body>
 
</html>

案件效果


本文链接:HTML5 Canvas  制作一个“在线画板”,由领悟书生原创

转载请注明出处【http://www.656463.com/article/334】

相关问答

更多

使用html5 canvas和javascript的奇怪行为(Strange behaviour with html5 canvas and javascript)

我在你的代码中看到一些故障: 为每个笔画/填充执行beginPath()。 在弧上执行closePath()使其成为圆形而不是360度圆弧。 在执行.rotate之前,请务必使用.translate设置旋转点 stvorec(Math.random())仅产生0-1度的角度。 这不是一个小故障,而只是一个命名奇怪:你调用了你的上下文变量canvas 。 上下文变量通常称为context或ctx 我不知道你的设计要求,但这里有一些重构的工作代码: http://jsfiddle.net/m1eri

HTML5 Canvas:如何边界fillRect?(HTML5 Canvas: How to border a fillRect?)

计算出您想要绘制宽度和高度的正方形的位置。 完成后,只需先绘制一个较大的正方形,其宽度为2,高2,但中心点相同。 所以你绘制一个更大的正方形,然后在顶部绘制正常的正方形,然后给你一个正方形有边框的错觉 HTML <canvas id="canvas1" width="400" height="300" style="border:1px solid #000000;"></canvas> CSS #canvas1{ border: solid 1px black; } 使用Javascr

不使用Javascript使HTML5 Canvas区域无法选择(Make HTML5 Canvas area unselectable without Javascript)

如果您不需要支持IE9,那么您确实可以使用用户选择(您需要为每个浏览器添加前缀:-ms - , - moz-和-webkit-)。 选择仍然出现的原因可能是选择了比您想象的更高级别的元素。 例: <body> <div id="wrapper"> <div id="content"> <div id="richUI"> <canvas id="navigationTabs"> 如果您正在使用“navigationTabs”,请尝试使用“richU

基本的JS / HTML5画布问题(Basic JS/HTML5 Canvas Issue)

您之前没有包含jQuery核心脚本,这就是它失败的原因。 另外,我建议使用jQuery函数来添加属性,而不是使用字符串。 <!doctype html> <html lang="en"> <head> <meta charset='utf-8'> <title>Test Game</title> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <

HTML5 Canvas动画和效果的引擎?(Engine for HTML5 Canvas animations and effects?)

看看CreateJS ; 对于您正在寻找的东西,它是一个很棒的引擎。 EaseJS可用于Canvas元素 SoundJS用于播放您要播放的音频片段 它维护得很好,但尚未发布1.0版本。 Take a look at CreateJS; it's a great engine for what you're looking for. EaseJS can be used for the Canvas element SoundJS for the audio clip which you want

相关文章

更多

最近更新

更多